Posicionamiento Absoluto en CSS
El uso de posicionamiento absoluto elimina el elemento del flujo de documento predeterminado, permitiendo que otros elementos vecinos ocupen el espacio. Los valores de posicionamiento top, left, bottom y right del elemento se calculan en relación con su ancestro más cercano que tenga un posicionamiento distinto de estático. Si no existe tal ancestro, los valores se determinan en función de los bordes del elemento <body>.
position: absolute;
Generalmente, se utiliza el posicionamiento absoluto en combinación con el posicionamiento relativo porque es necesario ubicar un elemento en relación con otro elemento dentro del flujo del documento.
Considere el siguiente ejemplo. El objetivo es ubicar el nombre de la ciudad (un elemento <span> con la clase description) en la esquina superior derecha de la tarjeta de ciudad (un elemento <div> con la clase card). Preste atención a la propiedad de posición para los diferentes elementos.
index.html
index.css
En este ejemplo, los elementos .description están posicionados de forma absoluta dentro de los elementos .card, gracias a que se aplica position: relative; a .card. Esta configuración sitúa los nombres de las ciudades en la esquina superior derecha de cada tarjeta.
Es posible mover el elemento con respecto a otro elemento. ¿Cómo funciona? Es necesario aplicar position: relative; al elemento ancestro del elemento que se desea posicionar de forma absoluta. De lo contrario, el elemento se posicionará con respecto al elemento <body>.
Nota
Al especificar las propiedades
top,left,rightybottompara el elemento posicionado absolutamente, el navegador las calcula comenzando desde los bordes del elemento posicionado relativamente. Esto puede interpretarse como aplicar un margen al elemento hijo dentro del elemento padre.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Posicionamiento Absoluto en CSS
Desliza para mostrar el menú
El uso de posicionamiento absoluto elimina el elemento del flujo de documento predeterminado, permitiendo que otros elementos vecinos ocupen el espacio. Los valores de posicionamiento top, left, bottom y right del elemento se calculan en relación con su ancestro más cercano que tenga un posicionamiento distinto de estático. Si no existe tal ancestro, los valores se determinan en función de los bordes del elemento <body>.
position: absolute;
Generalmente, se utiliza el posicionamiento absoluto en combinación con el posicionamiento relativo porque es necesario ubicar un elemento en relación con otro elemento dentro del flujo del documento.
Considere el siguiente ejemplo. El objetivo es ubicar el nombre de la ciudad (un elemento <span> con la clase description) en la esquina superior derecha de la tarjeta de ciudad (un elemento <div> con la clase card). Preste atención a la propiedad de posición para los diferentes elementos.
index.html
index.css
En este ejemplo, los elementos .description están posicionados de forma absoluta dentro de los elementos .card, gracias a que se aplica position: relative; a .card. Esta configuración sitúa los nombres de las ciudades en la esquina superior derecha de cada tarjeta.
Es posible mover el elemento con respecto a otro elemento. ¿Cómo funciona? Es necesario aplicar position: relative; al elemento ancestro del elemento que se desea posicionar de forma absoluta. De lo contrario, el elemento se posicionará con respecto al elemento <body>.
Nota
Al especificar las propiedades
top,left,rightybottompara el elemento posicionado absolutamente, el navegador las calcula comenzando desde los bordes del elemento posicionado relativamente. Esto puede interpretarse como aplicar un margen al elemento hijo dentro del elemento padre.
¡Gracias por tus comentarios!
