我有一系列带有position:absolute
的div(由于视觉样式的原因,这是必须的),但在其中一个内部,我有一个日期选择器,其中z-index: 1000
浮动在所有内容之上。为了实现这一目标,我已将{{1}}指定为一个很好的价值。
我发现内部z-index由于父容器而不起作用。是否有这样的黑客来解决这个问题? 父容器必须具有这样的z-index才能在兄弟div之上,但是其中一个框内的datepicker必须位于所有内容之上,现在它隐藏在下一个框之下。
这是具有实际示例的codepen:https://jsfiddle.net/052Lu6xt/2/
答案 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>
var regex = '^message=(.*)$';
var id = queryString.match(regex)[1];
&#13;
.match()
&#13;