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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -