inset y el centrado absoluto moderno

Cierras la teoría del módulo con la sintaxis moderna del posicionamiento: inset, la abreviatura de los cuatro offsets, y las dos técnicas de centrado absoluto — la clásica que DEBES reconocer (está en todo el código existente) y la moderna que debes escribir.

inset: los cuatro offsets en uno

inset: 0 estira el elemento hasta los cuatro bordes de su marco de referencia: EL patrón de los overlays — el velo oscuro sobre una imagen, la capa clickeable de una tarjeta, el fondo de un modal.

<figure class="foto">
<div class="imagen"></div>
<div class="velo"></div>
<figcaption>El velo es inset: 0 — cubre exacto, mida lo que mida la figura</figcaption>
</figure>

body { font-family: system-ui; padding: 24px; }
.foto { position: relative; margin: 0; width: 300px; border-radius: 12px; overflow: hidden; }
.imagen { height: 150px; background: linear-gradient(135deg, #6d28d9, #2563eb); }
.velo { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(2 6 23 / 0.7)); }
figcaption { position: absolute; bottom: 10px; left: 12px; right: 12px; color: white; font-size: 12px; font-weight: 600; }

El centrado absoluto: clásico vs moderno

El truco clásico — apréndelo para LEERLO, está en millones de líneas de código existente:

Las versiones modernas, según el caso:

Mini-reto

Ponle a la imagen principal de tu periódico un velo con degradado (inset: 0) y el titular encima, abajo a la izquierda — el patrón "tarjeta de National Geographic". Luego agrega un botón de play (▶) centrado con inset: 0; margin: auto.

Qué sigue

Teoría completa del posicionamiento: los 5 valores, las capas y el centrado. El reto del módulo junta todo en una sola tarjeta de producto: badge flotante, imagen que se desborda del marco y tooltip posicionado.