Why using absolute position causes the div to be on top?

by

This is how the painting order works. As described here you have the following order:

  1. For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block
    equivalent:

In this step you will print the background and border of the h1 element

  1. Otherwise: first for the element, then for all its in-flow, non-positioned, block-level descendants in tree order:

In this complex step you will print the content of the h1 element

  1. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

    1. All positioned descendants with ‘z-index: auto’

And in this step you will print the positioned element #back; thus it will be on the top of h1 even if in the DOM it’s before.

In other words, we first consider the in-flow elements then the postioned ones. Of course, changing z-index and/or other properties will affect the order because more steps can be consider.

For example adding a negative z-index to #back will trigger this rule:

  1. Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then
    tree order.

This will make the #back to be behind since h1 is printed later in the step (4) and (7).

Adding position:relative (or absolute or fixed) to h1 will make it a positioned element so like #back it will trigger the (8) and in this case the tree order will decide.

You may also notice that both background and content are printed in 2 different steps and this may also lead to some non intuitive painting behavior.

More Related Contents:

  1. How to center a “position: absolute” element
  2. ‘transform3d’ not working with position: fixed children
  3. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  4. How does the “position: sticky;” property work?
  5. Why does position:relative; appear to change the z-index?
  6. Why do absolute elements stack up on each other instead of stacking one after the other?
  7. Absolute position is not working
  8. Position: sticky buttons not working in IE 11
  9. ‘position: sticky’ not working when ‘height’ is defined
  10. Center aligning a fixed position div
  11. Position absolute and overflow hidden
  12. Absolute positioning inside absolute position
  13. How to make div’s percentage width relative to parent div and not viewport
  14. Why is an element with position: fixed moving with a non-positioned sibling?
  15. Why isn’t my margin working with position: fixed?
  16. Why doesn’t width/height work with non positioned pseudo elements?
  17. Position fixed doesn’t work when using -webkit-transform
  18. body { overflow-x: hidden; } breaks position: sticky
  19. sticky position on css grid items
  20. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  21. How to work with ellipsis in bootstrap responsive table
  22. Trying to work on responsiveness of login form
  23. One flex/grid item sets the size limit for siblings
  24. How do I get this CSS text-decoration override to work?
  25. Align an element to bottom with flexbox
  26. Flexbox and Internet Explorer 11 (display:flex in ?)
  27. Changing highlight color
  28. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  29. Why isn’t position:sticky with left:0 working inside a scrollable container?
  30. Why do Firefox and Opera ignore max-width inside of display: table-cell?

Leave a Comment