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.
Funny, Chris — I have the same thing stuck in my head about 100% width/height being more “reliable.” Maybe it was back in the days of IE 6–8?
Probably! The irony is that by doing it that way, then you have to worry about padding or borders causing a blowout if you don’t set the box-sizing. Plus, you might be doing it on a pseudo-element, which means you then also needed to remember to set the box-sizing on pseudo-elements.
right: 0; bottom: 0won’t work with some elements that have an inherent width/height, like iframe or video. Maybe that only applies to IE 11, but unfortunately it means that there’s no universally usable utility class for this use case.And
width: 0; height: 0won’t work if the parent has any padding or no defined height.Is it possible to put a transparent picture over an rgb number as to create a pearl car color?
Parent container
Stephanie Eckles shows us
The inset trick doesn’t seem to be working in Safari.
Michelle touches on browser support in her post, but yeah,
insetsupport is currently low.