css - absolute positioned div's relative positioned sibling has moved above -

below have absolute positioned div#in resides within relative position div#out. div#in pulled out of flow , stretched on div#out coordinate top,bottom,left,right being set 0. fine, don't understand if give div#sibling postion:relative appears above div#in.

i've checked z-index of divs , "auto" believe same zero.

i using version 45.0.2454.101 ubuntu 14.04 (64-bit) believe misunderstanding on part,not browsers problem.

any appreciated.

<style>     #out {          border: 1px solid red;         background: red;         position: relative;     }     #in {          border: 1px solid green;         background: green;         position: absolute;         top:0;         right:0;         bottom: 0;         left: 0;     }     #sibling{         position:relative;     } </style>  <div id="out">      outer div<br>     position relative      <div id="in">inner div position absolute</div>     <div id="other">other div position static </div>     <div id="sibling">sibling position relative </div> </div> 

according w3schools:

an element greater stack order in front of element lower stack order. note: z-index works on positioned elements (position:absolute, position:relative, or position:fixed).

when give position relative #sibling, appeared above #in because of html order.

solutions:

give more z-index #in

css

#in {          border: 1px solid green;         background: green;         position: absolute;         top:0;         right:0;         bottom: 0;         left: 0;         z-index:10;     }  #sibling{     position:relative;     z-index:5; } 

html

<div id="out">      outer div<br>     position relative      <div id="in">inner div position absolute</div>     <div id="other">other div position static </div>     <div id="sibling">sibling position relative </div> </div> 

or

css

#in {          border: 1px solid green;         background: green;         position: absolute;         top:0;         right:0;         bottom: 0;         left: 0;     }  #sibling{    //you can remove position    //position:relative; } 

html

<div id="out">      outer div<br>     position relative     <div id="sibling">sibling position relative </div>     <div id="in">inner div position absolute</div>     <div id="other">other div position static </div> </div>