stackjlei stackjlei - 1 month ago 10
CSS Question

How does position:absolute change element's overlay properties?

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?

Answer

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.

Comments