css - Why position: relative without z-index creates a new stacking context? -
from article:
two elements same stack level layered based on source order. successive elements stack on top of predecessors.
and this:
a stacking context formed, anywhere in document, element in following scenarios: ... 2. element position value "absolute" or "relative" and z-index value other "auto".
now please @ piece of code:
.c1 { position: relative; top: 50px; } .c2 { background: green; width: 200px; height: 200px; }
<div class="c1"> why i'm visible? </div> <div class="c2"> </div>
as follows 2 previous quotes, div.c1
shouldn't create new stacking context, because doesn't have z-index
. therefore, div.c1
, div.c2
in <html>
stacking context, , should rendered in order. why div.c2
rendered under div.c1
?
here c1 has got stacking context since has position:relative in it, if give position absolute c2 both divs @ same level. layered on source order.
.c1 { position:relative; background:blue; top: 50px; } .c2 { position:absolute; background: green; width: 100px; height: 100px; }
<div class="c1"> i'm visible? </div> <div class="c2"> </div>
Comments
Post a Comment