📝 CSS-Tricks 231: Notes on Hotwire

View this newsletter on the web.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s