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

Question

Please see this very simple snippet to illustrate my question below:

Answer 1

The top, right, bottom, left, and z-index properties have no effect for position: static which is the default value for elements, in your case which h1 tag is. When position is set to relative it creates a new stacking context when the value of z-index is other than auto.

For more read on stacking context:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context