nested z-index doesn't work

Question

I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.

I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ? The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.

This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw

Please add a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Jan 22 '16 at 19:32
Could you move "DTpicker" underneath the last box and re-position it? — DatScreamer, Jan 22 '16 at 19:33
possible guidance: [Basics of the CSS `z-index` property](http://stackoverflow.com/a/32515284/3597276) — Michael Benjamin, Jan 25 '16 at 00:33

score 1 · Answer 1 · answered Jan 22 '16 at 19:33

The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.

Don't do that. Remove

.box {
  z-index: 20;
}

.banner {
  padding: 10px;
  background: #454545;
  position: fixed;
  width: 100%;
}
.box {
  position: relative;
  float: left;
  margin-left: 20px;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid #999;
  padding: 20px;
  background: #45e;
}
.box:first-child {
  margin-left: 0;
}
.dtpicker {
  background-color: #34ed22;
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  position: absolute;
  left: 50px;
  z-index: 50;
}

<div class="banner">
  Something behind
</div>
<div class="box" >
  Box
</div>
<div class="box" >
  Box
</div>
<div class="box" >
  Box
  <div class="dtpicker">
    Dt picker
  </div>
</div>
<div class="box" >
  Box
</div>

I recommend reading What No One Told You About Z-Index.

Thanks for your help. As you can see in my original question, unfortunately the z-index:20 in the parent is a must be. — alexserver, Jan 26 '16 at 01:17

nested z-index doesn't work

1 Answers1