🐝 The Reason Why CSS Inset Property Was Not Called Position

Yesterday, Mohamed Saleh shared a nice illustration in LinkedIn about a useful CSS property:

The property is called inset and is a shorthand for top, right, bottom, left.

Now, you need some introduction. I am a design developer and for countless years am working with implementing designs in Vue, React, Angular, Ember and so on.

It means I not only know CSS, I love it. CSS is the best solution for the design you can possibly imagine given that design implementation is not easy.

It also means I am tracking CSS development and am quite familiar with all the new shenenigans. But for last couple of weeks I couldn’t recall inset until seeing Mohamed’s post.

Read to the end for a bonus!

CSS is great. But it made me wonder (for heaven sakes!), why W3C didn’t call this property position 😆…

You may wonder to, and you may also struggle with remember all of the CSS properties. Let us all try to remember inset with this article.

How To Remember CSS Inset Is A Position?

The reason why W3C didn’t use the position name, is because there is already a position property in CSS.

Position property is used to define how an element is positioned on a page. There are multiple values the property can have.

The default one is static. It means an element is positioned according to the regular document flow.

If you want to move the element away relatively to its regular position, you can set position to relative and use inset to define the offset.

Don’t forget to subscribe!

There are also other values that position property accepts. For example static positions an e element relative to the viewport meaning you can make something display all the time, even if you scroll the page (don’t).

There is also sticky element. It behaves like a relatively positioned element, until it would normally dissappear from…