Diferencias de elementos | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación

Hola Angel, espero estés muy bien.

Esto confunde a mucha gente porque la propiedad position define dos cosas:

cómo se comporta el elemento en relación con sus ascendientes en la jerarquía.
cómo se pueden comportar sus descendientes en relación con él.

Los principios son:

Tanto position: relative como position: absolute determinan los contextos de ubicación de los descendientes del elemento.

Los elementos con position: absolute se colocan en relación con el contexto de posicionamiento más cercano. Por ejemplo:

<div style="position: relative">
    <div>
        <div style="position: absolute"></div>
    </div>
</div>

El tercer<div> puede ser posicionado con top y left en relación con el más externo. Si no se encuentra ningún contexto de ubicación subiendo en la jerarquía, el elemento se ubicará en relación con el <body>.

Elementos conposition: absolute no ocupan espacio en ninguno de los ascendientes hasta el contexto de posicionamiento. Teniendo en cuenta el ejemplo anterior, es como si el div interior no existiera, tanto para el medio como para el exterior. No ocupa espacio dentro de los demás, no afecta a su altura ni a su anchura. Se dice que se elimina del flujo de representación de documentos.

Elementos con position: relative ocupan espacio en sus ascendientes. Se pueden cambiar de su posición esperada top y left, pero este cambio no afecta a otros elementos en o por encima del mismo nivel de la jerarquía. Para otros, es como si siempre estuviera en la posición esperada. Pero visualmente puede estar fuera de lugar. Por ejemplo:

<div style="position: relative">
    <div style="height: 100px; background: red; position: relative; top: 50px"></div>
    <div style="height: 100px; background: blue"></div>
</div>

El div rojo está a 50 px de la parte superior del contenedor y sobre la mitad superior del div azul. Es decir, se desplazó 50 px de su posición esperada, pero eso no movió el div azul, todavía "piensa" que el rojo está donde debería. Por eso se dice que los elementos con posición: relativa están posicionados "relativamente a sí mismos"; la referencia para el desplazamiento es siempre el propio elemento (y no el contenedor), y para los demás elementos es como si no se hubiera desplazado.

Si necesitas ayuda, estaremos aquí! Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios