Una clase de utilidad para elementos de cobertura

Lo mismo para Michelle Barker aquí :

Aquí hay algo que necesito hacer una y otra vez en CSS: cubrir completamente un elemento con otro. Es el mismo CSS cada vez: se position: relativele ha aplicado el primer elemento (el que debe cubrirse) . El segundo tiene position: absolutey está colocado de manera que los cuatro lados se alineen con los bordes del primer elemento.

.original-element {  position: relative;}.covering-element {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

De alguna manera tengo metido en la cabeza que “no es tan confiable” de usar bottomy rightque es más seguro configurar topy leftluego hacer width: 100%y height: 100%. Pero ya no recuerdo por qué. ¿Quizás fue un problema del navegador más antiguo?

Pero hablando de modernizar las cosas, mi parte favorita del artículo de Michelle es esta:

.overlay {  position: absolute;  inset: 0;}

¡La insetpropiedad es una propiedad lógica y claramente es muy útil aquí! Lea el artículo para conocer otro truco relacionado con la cuadrícula CSS.