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.
Direct Link to Article — Permalink
The post A Utility Class for Covering Elements appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.