html - Why doesn't the browser respect the z-index of an element with a "position: fixed" parent? -

so have fiddle:

https://jsfiddle.net/ionescho/t0qo6z5u/ . html :

<div id="overlay"> </div>  <div id="top_menu">     <span>         fasdfsfafasdfas     </span> </div> 

and css:

#overlay{     position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   z-index: 1100;   background-color: #000;   opacity: 0.8; } #top_menu{     position:fixed;     top:0;     left:0;     right:0;     height:200px;     background-color:red;     padding-top:40px;     padding-left:40px; } #top_menu > span{     font-weight:bold;     color:white;     font-size:30px;     z-index:1101;     position:relative; } 

as can see, white text still behind semi-transparent overlay. if modify span's parent (#top_menu) "position:fixed" "position:relative", z-index behavior looking for.

however, cannot lose "position:fixed" property. know why happens , how can make work-around?

thanks.

your desired behavior standard one, , works on firefox.

however, according this answer,

this behavior slated changed elements position: fixed such establish stacking contexts regardless of z-index value. browsers have begun adopt behavior, change has not been reflected in either css2.1 or new css positioned layout module yet, may not wise rely on behavior now.

then if #top_menu establishes stacking context, z-index of #top_menu > span set z-position inside stacking context. however, #top_menu below #overlay.

to solve problem can set z-index #top_menu (and generate stacking context on browsers) value higher #overlay's one. however, #top_menu's background in front of #overlay.

#top_menu {   z-index: 1101; } 

#overlay {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 1100;    background-color: #000;    opacity: 0.8;  }  #top_menu {    position: fixed;    z-index: 1101;    top: 0;    left: 0;    right: 0;    height: 200px;    background-color: red;    padding-top: 40px;    padding-left: 40px;  }  #top_menu > span {    font-weight: bold;    color: white;    font-size: 30px;    z-index: 1101;    position: relative;  }

<div id="overlay"></div>  <div id="top_menu">    <span>fasdfsfafasdfas</span>  </div>