-1

In the example here, I notice if you take away the margin-left:200px from the first section element, it expands its width to fully match the container, but it doesn't go below the nav element, which is has position:absolute. Instead, it's overlaid by the nav element, as if it got a lower z-index. Why is that? Aren't both these elements in the flow of the document? So that means they should come one right after the other right, with the section element appearing under the nav element (this happens when I remove the position:absolute)? Why are they overlaid each other instead?

stackjlei
  • 9,485
  • 18
  • 65
  • 113

1 Answers1

2

Aren't both these elements in the flow of the document?

Nope! position: absolute; specifically removes elements from the flow.

As referenced in this answer, absolute positioning uses current positioning context. An element with position: absolute; is still affected by its parent, however it is completely independent of its siblings.

Community
  • 1
  • 1
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • the current positioning context applies to the element's children, so how does this workout in the example above? the nav is the absolute positioned element, and it's a child of the container, which is relative positioned. the section, a sibling of the nav, is relative positioned. this means that both the nav and section are just children of a relative positioned container, which puts them both under the parent's current positioning context. where does it say how children get affected? – stackjlei Oct 26 '16 at 23:18
  • While you are correct in that the `section` and the `nav` are sharing a **cartesian positioning context**, as I mentioned, absolute positioning does not acknowledge its siblings whatsoever. As described [earlier in the document](https://www.w3.org/TR/WD-positioning-19970819#Positioned): "The layout of each 'absolute' positioned element is independent of any others" – Tyler Roper Oct 26 '16 at 23:32