Posicionamiento Absoluto
El uso de posicionamiento absoluto elimina el elemento del flujo predeterminado del documento, permitiendo que otros elementos vecinos llenen el hueco. Los valores de posicionamiento top, left, bottom y right del elemento se calculan en relación a su antecesor más cercano con posicionamiento no estático. Si no existe tal ancestro, los valores se determinan basándose en los bordes del elemento <body>.
Generalmente, nos interesa usar posicionamiento absoluto en combinación con posicionamiento relativo porque necesitamos posicionar un elemento respectivamente a otro elemento en el flujo del documento.
Considere el siguiente ejemplo. La tarea consiste en colocar el nombre de la ciudad (un elemento <span> con la clase description) en la esquina superior derecha de la tarjeta de la ciudad (un elemento <div> con la clase card). Presta atención a la propiedad position de los distintos elementos.
index.html
index.css
index.js
En este ejemplo, los elementos .description se sitúan absolutamente dentro de los elementos .card, gracias a la position: relative; aplicada a los elementos .card. Este posicionamiento sitúa los nombres de las ciudades en la esquina superior derecha de cada tarjeta.
Podemos mover el elemento respectivamente a otro elemento. ¿Cómo funciona? Necesitamos aplicar position: relative; al elemento que es el ancestro del elemento que queremos posicionar absolutamente. En otro caso, el elemento será posicionado respectivamente al elemento <body>.
Nota
Cuando se especifican las propiedades
top,left,right, ybottompara el elemento absolutamente posicionado, el navegador las calcula empezando por los bordes del elemento relativamente posicionado. Esto puede verse como aplicar un margen al elemento hijo dentro del elemento padre.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Posicionamiento Absoluto
El uso de posicionamiento absoluto elimina el elemento del flujo predeterminado del documento, permitiendo que otros elementos vecinos llenen el hueco. Los valores de posicionamiento top, left, bottom y right del elemento se calculan en relación a su antecesor más cercano con posicionamiento no estático. Si no existe tal ancestro, los valores se determinan basándose en los bordes del elemento <body>.
Generalmente, nos interesa usar posicionamiento absoluto en combinación con posicionamiento relativo porque necesitamos posicionar un elemento respectivamente a otro elemento en el flujo del documento.
Considere el siguiente ejemplo. La tarea consiste en colocar el nombre de la ciudad (un elemento <span> con la clase description) en la esquina superior derecha de la tarjeta de la ciudad (un elemento <div> con la clase card). Presta atención a la propiedad position de los distintos elementos.
index.html
index.css
index.js
En este ejemplo, los elementos .description se sitúan absolutamente dentro de los elementos .card, gracias a la position: relative; aplicada a los elementos .card. Este posicionamiento sitúa los nombres de las ciudades en la esquina superior derecha de cada tarjeta.
Podemos mover el elemento respectivamente a otro elemento. ¿Cómo funciona? Necesitamos aplicar position: relative; al elemento que es el ancestro del elemento que queremos posicionar absolutamente. En otro caso, el elemento será posicionado respectivamente al elemento <body>.
Nota
Cuando se especifican las propiedades
top,left,right, ybottompara el elemento absolutamente posicionado, el navegador las calcula empezando por los bordes del elemento relativamente posicionado. Esto puede verse como aplicar un margen al elemento hijo dentro del elemento padre.
¿Todo estuvo claro?
