Static positioned elements affect Absolute position of subsequent sibling elements

Question

I understand that any element with position: absolute will be positioned 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 the w3schools site here...

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However, inserting a static element appears to disrupt this rule and shifts the absolute element. I'd like to understand why that happens. See code snippet below.

If the static element is chaged to absolute, the subsequent elements are displayed as expected (according to the nearesst positional ancestor rule).

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>

I think if not specify the positioning properties (top, right, bottom, left), then the absolute elements will be displayed on the place, as if it is a relative or a static. — Andrew Novikov, Jan 18 '18 at 12:53

score 3 · Accepted Answer · edited Feb 05 '18 at 15:39

3

As this answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:

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

but if you set any (top,left,right, bottom), this will reset the default position and will be relative to the parent.

top:0

edited Feb 05 '18 at 15:39

Mattias

715
1
6
19

answered Jan 18 '18 at 13:11

Renzo Calla

7,486
2
22
37

Thanks Renzo, all fairly clear now. Certainly was not clear that an Absolute with auto offsets would take the normal flow position. Thanks for your help. – NickJI Jan 18 '18 at 16:49

score 1 · Answer 2 · answered Jan 18 '18 at 14:13

1

When W3Schools (and the CSS spec) says that an element is "positioned relative to" something, it is never referring to the element's siblings. It's referring to the element's containing block.

The reason a non-positioned element (position: static) affects the layout of subsequent absolutely positioned elements with auto offsets is because absposed elements with auto offsets will assume their static position (see this answer as well as this one RenzoCC links to), and an element's static position, by nature, is influenced by the layout of surrounding elements, especially preceding siblings.

What absolutely positioning an element without changing any of its offsets does, is cause elements that follow it to be laid out as if that element itself were not there. This is what taking an element out of the flow means.

answered Jan 18 '18 at 14:13

BoltClock

700,868
160
1,392
1,356

The relative positioning and flow concepts are understood. My question related to the positioning of Absoute elements in relation to preceeding sibling elements contrasted to "An element with position: absolute; is positioned relative to the nearest positioned ancestor"(And this is widely repeated). It appears to me that this statement is misleading, as the position of an Absolute with auto offsets is the calculaed static position which takes into account preceeding siblings as pointed out in the references you (and RenzoCC) provided. Info provided solves it for me so thanks. – NickJI Jan 18 '18 at 16:41
@NickJI: Yeah the use of the word "relative" can be a bit confusing there. But once you understand what it means (which I've explained in my first paragraph), everything else will make sense. – BoltClock Jan 18 '18 at 16:43
I understood what relative meant - but that's not the complete story as the position of the Absolute element is partly determined by the preceding sibling and that is what was not clear. – NickJI Jan 18 '18 at 17:04

score 0 · Answer 3 · answered Jan 18 '18 at 13:13

Static position doesn't affect the Absolute position when it comes to the ancestor position which "position: relative".

But the "position: absolute" has a power to position itself whenever you want inside of the (see the additional code I made) "position: relative;" while the "position: static" don't have the ability to used the Top, Right, Bottom and Left because is it a default position where it is only located at the left side.

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 -->

Thanks for you time on this. My question was really why the static element influenced the position of the absolute element - and this has been addressed in the other answers. — NickJI, Jan 18 '18 at 16:53

Static positioned elements affect Absolute position of subsequent sibling elements

3 Answers3

Related