嵌套的z-index不起作用

时间:2016-01-22 19:28:44

标签: css z-index

我有一系列带有position:absolute的div(由于视觉样式的原因,这是必须的),但在其中一个内部,我有一个日期选择器,其中z-index: 1000浮动在所有内容之上。为了实现这一目标,我已将{{1}}指定为一个很好的价值。

我发现内部z-index由于父容器而不起作用。是否有这样的黑客来解决这个问题? 父容器必须具有这样的z-index才能在兄弟div之上,但是其中一个框内的datepicker必须位于所有内容之上,现在它隐藏在下一个框之下。

这是具有实际示例的codepen:https://jsfiddle.net/052Lu6xt/2/

1 个答案:

答案 0 :(得分:1)

问题是.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>

&#13;
&#13;
var regex = '^message=(.*)$';
var id = queryString.match(regex)[1];
&#13;
.match()
&#13;
&#13;
&#13;

我建议阅读What No One Told You About Z-Index