5

Just like the title, why div (or p or any other elements in html) have 'position: static' as the default value? Why not 'position: relative'? I don't see any benefit using 'position: static' in my css. Is it safe to define all div elements in html using 'position: relative'?

EDIT: I'm quite aware the difference between static, relative, absolute, and fixed positioning. But the main problem is why the default positioning for div or any other html elements is static? This example:

HTML

<div class="div1">
    <div class="div2">
        <div class="div3">
            <div class="div-last"></div>
        </div>
    </div>
</div>

CSS

.div1 {
    width: 700px;
    height: 700px;
    background-color: #000;
    position: relative;
}
.div2 {
    width: 600px;
    height: 600px;
    background-color: #333;
    position: relative;
    top: 20px;
    left: 20px;
}
.div3 {
    width: 500px;
    height: 500px;
    background-color: #777;
    position: absolute;
    right: 0;
    top: 30px;
}
.div-last {
    width: 400px;
    height: 400px;
    background-color: #AAA;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

shows that I don't need a single static positioning to arrange my divs as I want. Here's a jsfiddle of the code above. And sorry for my potato English. :D

EDIT #2: The answer from the related question is: "Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.

If every element has position:relative, this would be the direct parent.

But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body."

So, I don't want/need to "position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.", is there any other technical precautions that I need to know before I make all divs relative?

Roy Margasa
  • 53
  • 5
  • When all elements are relative positioned, absolute positioning will be no more difference to relative positioning, because it is relative to the next non-static positioned element. – Yogu May 14 '14 at 11:19
  • I know the difference between static and relative positioning. What I don't get it is why static as the default value? Relative positioning is way more useful, you can use top/left/right/bottom and using absolute positioning for the element's children. – Roy Margasa May 14 '14 at 11:20
  • To be fair, this is not really an exact duplicate, but your question can be answered by the information in the linked question. – Yogu May 14 '14 at 11:24
  • You're assuming every element needs those positioning schemes, @user. Do you find yourself having to position everything? – BoltClock May 14 '14 at 11:26
  • @BoltClock Yes, almost most of the times, I need to define relative positioning to divs either to position of positioned elements or using absolute positioning for it's children. – Roy Margasa May 14 '14 at 11:57
  • That's not the same as "every element". Just the ones you need. – BoltClock May 14 '14 at 12:00
  • @BoltClock Well, maybe I exaggerated it a little. Mainly these:

    ,

    ,
      ,
      ,
    1. , and maybe some other elements.
     – Roy Margasa May 14 '14 at 12:05
  • That still isn't reason enough to make the initial value be `relative` and not `static`. – BoltClock May 14 '14 at 12:07

1 Answers1

4

If position: relative was the default value, position: absolute; would no longer work as expected. That is, because position: absolute uses the closest non-static positioned element in the hierarchy as the reference. If there were no static positioned elements, all would be non-static, so position: absolute would use the parent element as the reference, and thus no longer positioning absolute, but relative to the parent element.

Yogu
  • 9,165
  • 5
  • 37
  • 58
  • I provided the jsfiddle for your suggestion and according w3 wiki: "An element with position:relative is first laid out just like any static element; block-level or inline. But then something interesting happens: the generated box is shifted according to the top, bottom, left and right properties." http://www.w3.org/wiki/CSS_static_and_relative_positioning – Roy Margasa May 14 '14 at 11:50
  • This is a misleading answer. If default position is relative and you have a parent with multiple children, absolute positioning one of those children will take it out of the flow. It will no longer affect the position of children below it. It will also be at the top of the parent when top is set to zero. This will not be the case for any of the other children. https://jsfiddle.net/0uq8a3vz/ Saying that absolute would become relative if everything is relative is just wrong. – spex May 29 '19 at 13:23
  • 1
    @spex You're right, the last two words might be misleading. I didn't mean "relative" as in `position: relative`, but that the positioning is relative to the parent element even though `position: absolute` is set. I edited it to make it clearer. – Yogu Jun 06 '19 at 18:52