How does the CSS position on a div affects position of sibling division?

Question

I have been going through CSS Positions articles on Alistapart. Below snippet caught my attention and couldn't fathom the theory behind.

Below html/css shows two boxes one over other. But if I change the position of #box_1 to absolute, then #box_2 overlap #box_1.

<!DOCTYPE html >
<html lang="en">
<head>
    <style>
        #box_1 { 
            position: relative;
            width: 200px;
            height: 200px;
            background: #ee3e64;
        }
        #box_2 { 
            position: absolute;
            width: 200px;
            height: 200px;
            background: #44accf;
        }
    </style>
</head>
<body>
    <div id="box_1"></div>
    <div id="box_2"></div>
</body>
</html>

How does the position of another box (box_1) affects position of a different/sibling div(box_2). Isn't 'absolute' should always absolute only to immediate non-static parent?
In the above css (with "position: relative;" in box_1), if I add "top: 0;" to #box_2, then box_2 appears to overlap again. Why does this happens?

BoltClock · Accepted Answer · 2013-02-12T08:43:40.267

An absolutely-positioned element will remain in its static position if you don't specify any of its top, right, bottom or left properties, regardless of whether any of its ancestors is positioned. That's why nothing appears to happen to #box_2 when you simply set it to position: absolute — instead, it's affected by #box_1 in the same way as if you hadn't specified position: absolute.

However, note that #box_1 affects #box_2 only because 1 precedes 2; once you absolutely position #box_2 it is taken out of the flow and any siblings that follow it will flow as if #box_2 was no longer there. See this example where I create a #box_3 that's identical to #box_1 and add it after #box_2, in which #box_3 overlaps #box_2 because 3 doesn't see 2 in the normal flow; it only sees 1.

Once you set top: 0 to #box_2, then it knows it has to be attached to the top of the viewport (as its containing block since none of its ancestors are positioned).

Ah, thats what I'm looking for ("An absolutely-positioned element will remain in its static position if you don't specify any of its top, right, bottom or left properties"). Thanks a bunch and +10 up votes; if only sf allows it :) — Dbob, Feb 12 '13 at 08:41
That's great to know, but is there a solution to display the #box_3 normally with the #box_2 positioned absolute please! @BoltClock — Manoj, Feb 14 '21 at 15:55

score 0 · Answer 2 · answered Feb 12 '13 at 08:53

The CSS position on a div does not affects position of sibling division, but it affects the child elements. For Example:

HTML:

  <div id="parent_1">
     <div id="child_1"></div>
     <div id="child_2"></div>
  </div>

CSS:

  #parent_1{ 
        position: relative;
        width: 400px;
        height: 400px;
        background: gray;
    }
 #child_1 {
    position: absolute;
    left:20px;
    top:20px;
    width:40px; 
    background:yellow;
 }
#child_2 {
    position: absolute;
    right:20px;
    top:20px;
    width:40px; 
    background:blue;
 }

now #parent_1 will create a box 400*400 and #child_1 will be place inside parent div and will positioned 20px from left and 20px from top.

your questions was "CSS position on a div affects position of sibling division?", my answer is NO it does not, it only affects child-divisions/child-elements only. — Amit, Feb 12 '13 at 09:50

How does the CSS position on a div affects position of sibling division?

2 Answers2

Linked

Related