What if there was no position: static;?

All elements in all browsers start out with the default positioning value static. You’ll rarely see this in an actual stylesheet, so the word might not be all that familiar. It’s just as well, the word itself isn’t very helpful in understanding what it means. You might think it makes the element sticky like when you rub a balloon on your head and stick it to the wall (static electricity). Really, it means the element will fall into the flow of the document as it normally would, unlike other positioning values which can remove the element from the natural document flow.

Now let’s say you take some element in its default static state and make it position: relative;. What happens? Just by changing/setting that value alone, nothing happens. It appears in the exact same place that it did before the change. What does change is these three things:

1. You can now nudge the position of the element with top/right/bottom/left values. However it’s original location will still be occupied by the element (like there is a ghost of the original element still there taking up space).
2. The element will now honor the z-index property, which controls which elements should appear on top in the case of overlap.
3. If the element has child elements that are absolutely positioned, they are now absolutely positioned within the context of this element.

So relative positioning enables some features and properties, but doesn’t do much on it’s own. So what if all elements just started out as position: relative;, rather than position: static;?

Advantages

If all elements started out with relative positioning, all three of the items above you’d have naturally. Your top/right/bottom/left values work as you would assume they do right out of the box. Z-index “just works” as well. The positioning context is always constrained to the next parent element, which makes logical sense.

I think overall CSS gets a understandability upgrade.

Disadvantages

Most notably, always constraining the positioning context to the parent element is limiting. Let’s say you want to position an element in the upper right of the page regardless of where the element appears in the markup. That’s going to be tough if the element is buried down the hierarchy. You’ll need to reset that positioning context for every parent element. That means setting them back to position: static;, and losing all the benefits of relative positioning along the way. =(

If natural relative position ever became a thing, I would think we’d need a different way of handling positioning contexts. Possibly like:

/* Not real code */

#parent-element {
  context: inherit | pass | accept;
}

Doing it today

Would mean:

* {
  position: relative;
}

So…

It’s probably not going to happen. This would be a pretty nasty breaking change with limited/questionable benefits. It’s also hard to say which we would end up doing more on average: setting position relative or resetting positioning contexts. I just think it’s an interesting thing to think about.