¿Cuáles son los principales métodos de posicionamiento en CSS?

Existen cuatro soluciones de posicionamiento: posicionamiento estático, posicionamiento relativo, posicionamiento absoluto y posicionamiento fijo. Puede utilizar la propiedad "posición" en CSS 3 para determinar el método de posicionamiento a utilizar.

De estas cuatro opciones, el posicionamiento estático y relativo no afectará el diseño de todo el documento, mientras que el posicionamiento absoluto y fijo estarán separados del documento, por lo que la página no reservará espacio para estos dos tipos de elementos posicionados. De forma predeterminada, todos los elementos se colocan estáticamente, es decir, los elementos se organizan en orden de arriba a abajo y de izquierda a derecha.

Siempre que la propiedad "posición" esté configurada para un elemento, su posición se puede definir con precisión utilizando las propiedades "arriba", "derecha", "abajo" e "izquierda".

Información ampliada:

"arriba", "derecha", "abajo" e "izquierda" en posicionamiento relativo se utilizan para establecer el desplazamiento desde la posición original del elemento, pero absoluto Los cuatro atributos del posicionamiento son diferentes.

En posicionamiento absoluto, "superior" es la distancia entre el borde exterior sobre el elemento posicionado y el borde interior sobre el bloque contenedor. En otras palabras, los márgenes del elemento posicionado y los límites del bloque contenedor afectarán el valor de top y por lo tanto la posición del elemento absolutamente posicionado, pero el relleno del bloque contenedor no tendrá ningún efecto. En posicionamiento relativo, "superior" es la distancia entre el borde exterior sobre el elemento posicionado y el borde superior de su posición original. "Abajo" significa algo así como "arriba", especificando la distancia entre el borde exterior debajo del elemento posicionado y el borde interior debajo del bloque contenedor, al igual que "izquierda" y "derecha".