Posicionamiento absoluto de CSS
- Página anterior Posicionamiento relativo de CSS
- Página siguiente Flotación de CSS
El cuadro del elemento absolutamente posicionado se elimina completamente del flujo del documento y se posiciona en relación con su contenedor, que puede ser otro elemento en el documento o el contenedor inicial. El espacio ocupado originalmente por el elemento en el flujo normal se cerrará, como si el elemento no hubiera existido. Después de la posicionamiento, se genera un cuadro de nivel de bloque, independientemente de qué tipo de cuadro generaba originalmente en el flujo normal.
Posicionamiento absoluto de CSS
La posición del elemento absolutamente posicionado no tiene relación con el flujo del documento, por lo tanto, no ocupa espacio. Esto es diferente de la posición relativa, que en realidad se considera parte del modelo de posicionamiento del flujo normal, porque la posición del elemento es relativa a su posición en el flujo normal.
Los elementos restantes en el flujo normal se organizan como si los elementos absolutos no existieran:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
Como se muestra en la siguiente imagen:
La posición del elemento de posicionamiento absoluto esEl elemento ancestor más cercano que ha sido posicionado, si el elemento no tiene elementos ancestor posicionados, su posición esEl contenedor inicial.
El problema principal de posicionamiento es recordar el significado de cada tipo de posicionamiento. Por lo tanto, ahora revise lo que hemos aprendido: el posicionamiento relativo es "relativo" a la posición inicial del elemento en el documento, mientras que el posicionamiento absoluto es "relativo" al elemento ancestor más cercano que ha sido posicionado, si no hay elementos ancestor posicionados, entonces "relativo" al contenedor inicial.
Comentario:Diferente de agente de usuario, el contenedor inicial puede ser el lienzo o el elemento HTML.
Consejo:Dado que los cuadros de posicionamiento absoluto no tienen relación con el flujo del documento, pueden cubrir otros elementos en la página. Se puede configurar Atributo z-indexPara controlar el orden de apilamiento de estos cuadros.
Ejemplo de posicionamiento absoluto de CSS
- Posicionamiento: posicionamiento absoluto
- Este ejemplo muestra cómo usar valores absolutos para posicionar elementos.
- Página anterior Posicionamiento relativo de CSS
- Página siguiente Flotación de CSS
