December 26th, 2020
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: relative
applied to it. The second hasposition: absolute
and 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.
The original post A Utility Class for Covering Elements.