Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Posicionamiento Absoluto en CSS | Dominio del Posicionamiento en CSS
Técnicas Avanzadas de CSS

bookPosicionamiento 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.html

index.css

index.css

copy

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, right y bottom para 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.

question mark

¿Qué sucede con la posición de un elemento cuando aplicamos position: absolute?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

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.04

bookPosicionamiento 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.html

index.css

index.css

copy

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, right y bottom para 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.

question mark

¿Qué sucede con la posición de un elemento cuando aplicamos position: absolute?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4
some-alt