Static positioned elements affect the absolute position of subsequent brother elements

Question

I understand that any element with a position: absolute will be located relative to the nearest ancestor with a positional attribute, such as absolute or relative. This is mentioned in various answers, for example here . Also on w3schools site here ...

Element with position: absolute; It is positioned relative to the nearest located ancestor (instead of positioning relative to the viewport, as fixed).

However, inserting a static element violates this rule and shifts the absolute element. I would like to understand why this is happening. See code snippet below.

If the static element is passed to the absolute, subsequent elements are displayed as expected (in accordance with the rule of the ancestor of the pre-holiday ancestor).

div.relative { position: relative; width: 440px; height: 600px; border: 3px solid #73AD21; } div.static { position: static; width: 200px; height: 100px; border: 3px solid #73ADff; } div.absolute { position: absolute; width: 200px; height: 100px; border: 3px solid #73AD21; } div.absolute2 { left:210px; position: absolute; width: 200px; height: 100px; border: 3px solid #ffAD21; } 

 <div class="relative">This div element has position: relative; <div class="static">This div element has position: static</div> <div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div> <div class="absolute2">This div element also has position: absolute;</div> </div> 

Answer 1

As this answer explains, if there are no (top, left, right, bottom) position attributes: the absolute element will be placed by default, as if it were part of a normal flow , this is useful if you want to maintain a position: absolute next to her sibling, like a tool tip, and manipulate it using the margin property, say:

 margin-top:-40px; margin-left:30px; 

but if you set any (top, left, right, bottom), it will reset by default and will refer to the parent.

 top:0 

Answer 2

When W3Schools (and the CSS specification) say that an element is "positioned relative to", it never refers to the siblings of the elements. This refers to an element containing a block.

The reason that an element with no position ( position: static ) affects the location of subsequent absolutely positioned elements with automatic offsets is because elements with automatic offsets will assume their static position (see this answer , as well as this one related to RenzoCC ), and the element of a static position by its nature depends on the location of the surrounding elements, especially the previous brothers and sisters.

The fact that the element absolutely positions without changing any of its displacements is the reason that the elements that follow it are laid out as if this element did not exist. This is what takes an element out of the stream.

Answer 3

Static position does not affect the position of the Absolute when it comes to the position of the ancestor, which is "position: relative."

But "position: absolute" has the right to position itself whenever you want inside (see the additional code I made) "position: relative;" while "position: static" does not have the ability to use Top, Right, Bottom and Left, because this is the default position, where it is located only on the left.

 div.relative { position: relative; width: 440px; height: 600px; border: 3px solid #73AD21; } div.static { position: static; width: 200px; height: 100px; border: 3px solid #73ADff; } div.absolute { position: absolute; width: 200px; height: 100px; border: 3px solid #73AD21; /* Absolute Location inside the Relative Position */ top: 0; left: 0; } div.absolute2 { left:210px; position: absolute; width: 200px; height: 100px; border: 3px solid #ffAD21; /* Absolute Location inside the Relative Position */ top: 0; } 

 <div class="relative">This div element has position: relative; <div class="static">This div element has position: static</div> <div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div> <div class="absolute2">This div element also has position: absolute;</div> </div> <!-- / .relative -->