El posicionamiento absoluto se emplea para establecer de forma precisa la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top, right, bottom y left. La interpretación de los valores de estas propiedades es mucho más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento contenedor.
Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras cajas.
el desplazamiento de una caja posicionada de forma absoluta se indica mediante las propiedades top, right, bottom y left. A diferencia de posicionamiento relativo, en este caso la referencia de los valores de esas propiedades es el origen de coordenadas de su primer elemento contenedor posicionado.
Determinar el origen de coordenadas a partir del cual se desplaza una caja posicionada de forma absoluta es un proceso complejo que se compone de los siguientes pasos:
▪ Se buscan todos los elementos contenedores de la caja hasta llegar al elemento <body> de la página.
▪ Se recorren todos los elementos contenedores empezando por el más cercano a la caja y llegando hasta el <body>
▪ De todos ellos, el navegador se queda con el primer elemento contenedor que esté posicionado de cualquier forma diferente a position: static
▪ La esquina superior izquierda de ese elemento contenedor posicionado es el origen de coordenadas.
Una vez obtenido el origen de coordenadas, se interpretan los valores de las propiedades top, right, bottom y left respecto a ese origen y se desplaza la caja hasta su nueva posición.
Para posicionar la imagen de forma absoluta, el navegador realiza los siguientes pasos:
1. Obtiene la lista de elementos contenedores de la imagen: <div> y <body>.
2. Recorre la lista de elementos desde el más cercano a la imagen (el <div>) hasta terminar en el <body> buscando el primer elemento contenedor que esté posicionado.
3. El primer elemento contenedor es el <div>, pero su posicionamiento es el normal o estático, ya que ni siquiera tiene establecida la propiedad position.
4. Como el siguiente elemento contenedor es el <body>, el navegador establece directamente el origen de coordenadas en la esquina superior izquierda de la página.
5. A partir de ese origen de coordenadas, la caja se desplaza 50px hacia la derecha (left: 50px) y otros 50px de forma descendente (top: 50px).
Además, el párrafo que se mostraba debajo de la imagen sube y ocupa el lugar dejado por la imagen. El resultado es que el elemento <div> ahora sólo contiene el párrafo y la imagen se muestra en un nivel superior y cubre parcialmente los contenidos del párrafo.
A continuación, se posiciona de forma relativa el elemento <div> que contiene la imagen y el resto de reglas CSS no se modifican. La única propiedad añadida al <div> es position: relative por lo que el elemento contenedor se posiciona pero no se desplaza respecto de su posición original:
div {
border: 2px solid #CCC;
padding: 1em;
margin: 1em 0 1em 4em;
width: 300px;
position: relative;
}
div img {
position: absolute;
top: 50px;
left: 50px;
}
Si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor, es imprescindible posicionar el elemento contenedor. Para ello, sólo es necesario añadir la propiedad position: relative, por lo que no es obligatorio desplazar el elemento contenedor respecto de su posición original.
No hay comentarios:
Publicar un comentario