📝 CSS-Tricks 231: Notes on Hotwire

A Utility Class for Covering Elements

Earlier this month Michelle Barker looked into how to cover elements with CSS and had this interesting tip that I’ve never seen before:

.original-element { position: relative; } .covering-element { position: absolute; inset: 0; }

Here’s a tiny demo of that. What interests me most here is that inset: 0 bit, which is part of the Logical Properties spec. Adam Argyle summarized it all not so long ago in a neat post where he writes that:

…a logical property is one that references a side, corner, or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.