why not setting default position to relative?
Asked Answered
F

2

8

I recently realized how useless the position: static Is , It doesn't offer you anything unless the relative also does.
In fact my question Is "why not just adding this line to our CSS file ?"

* { position:relative; }

so we are always able to easily position any element absolutely from It's parent or moving the element It self around just by left: ... or the same for any direction.
so why elements are not positioned to relative by default?

thanks

Fifteen answered 29/6, 2016 at 22:2 Comment(7)
What if you want to apply position: absolute to element related to its parent's parent? In this case you would have to set position: static to parent.Feria
It's not something you'd usually do, It may happen once or twice In a full layout , then you'd easily switch back to static (position: static)Fifteen
I agree with you when it comes to display: block elements, not on inline elements though. Also table related elements might give you unexpected results.Mcguigan
Besides, <li> = display: list-item, <table> = display: table, <span> = display: inline etc.Feria
@Mcguigan , would you explain more ? what are unexpected results ? a fiddle would helpFifteen
@makshh , I'm not talking about different displays , what do you mean? It's perfectly OK to have a list Item , table or span with relative position , nothing change'sFifteen
Oh sorry, I don't know what I was thinking writing this comment (display-position <> related) :) I think that if you are ok with it you can use it.Feria
M
9

Let's take some element in its default static state and make it position: relative;. Just by changing that value alone, nothing happens. It appears in the exact same place that it did before the change. But it does change two things:

  1. 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. If the element has child elements that are absolutely positioned, they are now absolutely positioned within the context of this element.

Advantages

If all elements started out with relative positioning, all two 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.

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.

Montherlant answered 30/6, 2016 at 5:10 Comment(1)
If you want to position some element at the top of page you can still use Fixed and avoid the resetting of all parent elements. Yes, there's a difference between fixed and absolute that absolute will be affected by scrolling as attached to body not viewport, but this is such a fringe case that it can't be considered a serious disadvantage.Defer
A
1

static positioning is the default because it simply doesn't "interfere" with the positioning of any other element on the page. In that sense, it is the least disruptive state an element can have. Also, when we are talking about the rendering of the web page which is a very costly and sophisticated operation - it's faster to just draw a page with a lot of static elements than otherwise positioned elements. Modern browsers definitely are very advanced in that regard, but it certainly played a role for browsers 20 years ago.

In terms of convenience: Imagine an element on a dynamic page which you want to position absolutely. You know, which element you want to position it to, but you don't know how many levels might be in between. With static positioning, you just declare position:relative on your anchor element. With all elements having relative positioning you somehow would need to reposition all elements in between, giving you a hard time.

Absence answered 29/6, 2016 at 22:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.