Big ol’ same to Michelle Barker here:
Here’s something I find myself needing to do again and again in CSS: completely covering one element with another. It’s the same CSS every time: the first element (the one that needs to be covered) has
position: relativeapplied to it. The second hasposition: absoluteand is positioned so that all four sides align to the edges of the first element.
.original-element {
position: relative;
}
.covering-element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}I have it stuck in my head somehow that it’s “not as reliable” to use bottom and right and that it’s safer to set the top and left then do width: 100% and height: 100%. But I can’t remember why anymore—maybe it was an older browser thing?
But speaking of modernizing things, my favorite bit from Michelle’s article is this:
.overlay {
position: absolute;
inset: 0;
}The inset property is a Logical Property and clearly very handy here! Read the article for another trick involving CSS grid.
