Flexbox y Grid colocan los elementos dentro del flujo de la página.
relative desplaza y sirve de referencia; absolute sale del flujo; fixed se queda en la ventana; sticky se pega al hacer scroll.
Patrón clave: padre relative + hijo absolute.
z-index ordena elementos posicionados que se superponen.
position es para detalles; la composición general, con Flexbox y Grid.
Flexbox y Grid colocan los elementos dentro del flujo de la página. A veces necesitas sacar algo de ese flujo: una etiqueta "Nuevo" sobre la esquina de una tarjeta, una cabecera que se queda fija al hacer scroll, un botón flotante o un visor a pantalla completa. Para eso está position.
ValorQué haceSe coloca respecto a… staticValor por defecto: el elemento sigue el flujo normal.— relativeSigue en el flujo, pero puedes desplazarlo un poco. Sirve de referencia a sus hijos absolute.Su posición original absoluteSale del flujo (no ocupa espacio).El ancestro posicionado más cercano (o la página) fixedSale del flujo y se queda fijo al hacer scroll.La ventana stickySe comporta como relative hasta que llega a un punto y entonces se queda pegado.Su contenedor con scroll
Con top, right, bottom y left (o el atajo inset) indicas dónde se coloca.
<article class="tarjeta"> <span class="etiqueta">Nuevo</span> <img src="img/cartel.jpg" alt="Cartel del Festival de Otoño"> <h3>Festival de Otoño</h3> </article>
.tarjeta { position: relative; /* referencia para la etiqueta */ } .etiqueta { position: absolute; top: 0.75rem; right: 0.75rem; background: #e63946; color: #fff; padding: 0.25rem 0.5rem; }
💡 Consejo. La pareja relative en el padre + absolute en el hijo es el patrón más usado. Si olvidas el relative, el hijo se colocará respecto a la página entera.
Cuando elementos posicionados se superponen, z-index decide el orden: cuanto mayor, más arriba. Solo funciona en elementos con position distinta de static (y en hijos de Flexbox y Grid).
.cabecera { z-index: 10; } .visor { z-index: 100; }
Usa pocos valores y bien separados (1, 10, 100) para no acabar en una "guerra" de z-index: 99999.
absolute sin un padre con position: relative. Maquetar la página entera con absolute: se rompe en cuanto cambia el tamaño de la pantalla. Para maquetar, Flexbox y Grid. z-index que "no funciona" porque el elemento es static. Una capa fixed que tapa contenido sin forma de cerrarla con el teclado.
Flexbox y Grid colocan los elementos dentro del flujo de la página.
Código del tema: position: sticky
Flexbox y Grid colocan los elementos dentro del flujo de la página. A veces necesitas sacar algo de ese flujo: una etiqueta "Nuevo" sobre la esquina de una tarjeta, una cabecera que se queda fija al hacer scroll, un botón flotante o un visor a pantalla completa. Para eso está position.
| Valor | Qué hace | Se coloca respecto a… |
|---|---|---|
static | Valor por defecto: el elemento sigue el flujo normal. | — |
relative | Sigue en el flujo, pero puedes desplazarlo un poco. Sirve de referencia a sus hijos absolute. | Su posición original |
absolute | Sale del flujo (no ocupa espacio). | El ancestro posicionado más cercano (o la página) |
fixed | Sale del flujo y se queda fijo al hacer scroll. | La ventana |
sticky | Se comporta como relative hasta que llega a un punto y entonces se queda pegado. | Su contenedor con scroll |
Con top, right, bottom y left (o el atajo inset) indicas dónde se coloca.
<article class="tarjeta">
<span class="etiqueta">Nuevo</span>
<img src="img/cartel.jpg" alt="Cartel del Festival de Otoño">
<h3>Festival de Otoño</h3>
</article>.tarjeta {
position: relative; /* referencia para la etiqueta */
}
.etiqueta {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: #e63946;
color: #fff;
padding: 0.25rem 0.5rem;
}💡 Consejo. La pareja relative en el padre + absolute en el hijo es el patrón más usado. Si olvidas el relative, el hijo se colocará respecto a la página entera.
Cuando elementos posicionados se superponen, z-index decide el orden: cuanto mayor, más arriba. Solo funciona en elementos con position distinta de static (y en hijos de Flexbox y Grid).
.cabecera { z-index: 10; }
.visor { z-index: 100; }Usa pocos valores y bien separados (1, 10, 100) para no acabar en una "guerra" de z-index: 99999.
absolute sin un padre con position: relative.absolute: se rompe en cuanto cambia el tamaño de la pantalla. Para maquetar, Flexbox y Grid.z-index que "no funciona" porque el elemento es static.fixed que tapa contenido sin forma de cerrarla con el teclado.