stackjlei stackjlei - 1 year ago 63
CSS Question

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

In the example here, I notice if you take away the

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
. 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
)? Why are they overlaid each other instead?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download