El propósito de usar el posicionamiento en CSS es controlar con mayor precisión el diseño y el posicionamiento de los elementos en la página. A través del posicionamiento, los elementos se pueden desplazar en relación con sus posiciones normales de flujo de documentos, logrando efectos de diseño más flexibles.
Hay cuatro categorías de segmentación:
- Posicionamiento estático: el posicionamiento estático es el método de posicionamiento predeterminado para los elementos y también es el método de posicionamiento más común. Los elementos se disponen de acuerdo con el flujo de documentos normal y no se ven afectados por los atributos de posicionamiento. Úselo
position: static;para configurar. - Posicionamiento relativo: el posicionamiento relativo desplaza un elemento en relación con su posición de flujo de documentos normal, pero no afecta el diseño de otros elementos. Ajuste la posición del elemento especificando desplazamientos relativos (arriba, derecha, abajo, izquierda). Los elementos relativamente posicionados aún conservan su ocupación espacial original. Úselo
position: relative;para configurar. - Posicionamiento absoluto: el posicionamiento absoluto saca un elemento del flujo de documentos normal y lo coloca en relación con su elemento antepasado posicionado más cercano (no posicionado estáticamente). Si no hay elementos antecesores posicionados, el posicionamiento es relativo al bloque contenedor inicial del documento. Utilice el posicionamiento absoluto para controlar con precisión la posición de los elementos. Úselo
position: absolute;para configurar. - Posicionamiento fijo: el posicionamiento fijo es un tipo especial de posicionamiento absoluto en el que los elementos se colocan en relación con la ventana gráfica en lugar de con el elemento principal. Un elemento de posición fija permanece en una posición fija cuando se desplaza la página y no cambia de posición a medida que se desplaza la página. Úselo
position: fixed;para configurar.
Mediante el uso de estos métodos de posicionamiento, se puede realizar el diseño y el posicionamiento precisos de los elementos en la página, lo que hace que la página sea más creativa e interactiva. Cada método de posicionamiento tiene sus escenarios aplicables, y se puede seleccionar un método de posicionamiento adecuado según las necesidades para lograr el efecto deseado.