CSS z-index for an element with fixed parent not working -
having issue when element relative positioning , parent fixed positioning not being affected z-index
property reason.
everything works fine if set parent element position:relative;
.outer { background-color: rgba(0, 0, 0, 0.5); width: 100px; height: 100px; } .inner { position: relative; z-index: 5; } #example1 .outer { position: absolute; top: 0; } #example2 .outer { position: fixed; top: 150px; } .backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); }
<div id="example1"> <div class="outer"> <div class="inner">z-index works fine</div> </div> </div> <div id="example2"> <div class="outer"> <div class="inner">z-index doesn't work</div> </div> </div> <div class="backdrop"> </div>
also fiddle.
...or set z-index:1
on #example2 .outer
place above .backdrop
Comments
Post a Comment