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

/* Esto, que escribiste mil veces... */
.overlay-viejo {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}

/* ...es esto (misma lógica de valores que margin/padding) */
.overlay {
position: absolute;
inset: 0;
}

.solo-arriba { inset: 12px 12px auto; }  /* top right/left bottom */

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:

.centrado-clasico {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* top/left ponen la ESQUINA del elemento en el centro;
 translate lo retrocede la MITAD DE SÍ MISMO. Ingenioso — y ya innecesario */

Las versiones modernas, según el caso:

/* ¿El elemento DEBE ser absolute (overlay sobre algo)? inset + margin */
.centrado-absoluto {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}

/* ¿Solo quieres centrar contenido? Ni position necesitas */
.centrado-normal { display: grid; place-items: center; }

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.