我有一些绝对定位的盒子。
其中之一具有嵌套的弹出窗口,然后更大。
我想在所有框的前面弹出窗口。
在框上设置z-index: 100
并在弹出窗口上设置z-index: 200
并没有帮助。
带有弹出框的框之后按文档顺序排列的框似乎超出了弹出框。
我对Z索引有什么想念?
div {
border: 1px solid black;
}
.container {
position: relative;
}
.foo {
position: absolute;
background-color: white;
width: 5em;
z-index: 100;
}
#b0 {
top: 0em;
left: 0em;
}
#b1 {
top: 3em;
left: 1em;
}
#b2 {
top: 6em;
left: 2em;
}
#b3 {
top: 9em;
left: 3em;
}
#b4 {
top: 12em;
left: 4em;
}
.popup {
z-index: 200;
position: absolute;
left: 1em;
top: -1em;
width: 8em;
height: 8em;
background-color: grey;
}
<div class="container">
<div class="foo" id="b0">
<span>absolute box b0</span>
</div>
<div class="foo" id="b1">
<span>absolute box b1</span>
<div class="popup">
popup box inside b1
</div>
</div>
<div class="foo" id="b2">
<span>absolute box b2</span>
</div>
<div class="foo" id="b3">
<span>absolute box b3</span>
</div>
</div>
http://jsfiddle.net/B59pR/2/
最佳答案
您需要查看https://css-tricks.com/almanac/properties/z/z-index/
以快速了解所有这些内容。特别是在其中说:
另请注意,嵌套起着重要作用。如果元素B位于元素A的顶部,则元素A的子元素永远不能高于元素B。
您所做的是从较低元素的孩子那里选出孩子,然后尝试让他们从较高元素的孩子那里选出来。
您需要做的就是在z-index 101上获得#b1框:
div {
border: 1px solid black;
}
.container {
position: relative;
}
.foo {
position: absolute;
background-color: white;
width: 5em;
z-index: 100;
}
#b0 {
top: 0em;
left: 0em;
}
#b1 {
top: 3em;
left: 1em;
}
#b2 {
top: 6em;
left: 2em;
}
#b3 {
top: 5em;
left: 3em;
}
#b1 {
z-index: 101;
}
.popup {
z-index: 200;
position: absolute;
left: 3em;
top: -1em;
width: 8em;
height: 8em;
background-color: grey;
}
<div class="container">
<div class="foo" id="b0">
<span>absolute box b0</span>
</div>
<div class="foo" id="b1">
<span>absolute box b1</span>
<div class="popup">
popup box inside b1
</div>
</div>
<div class="foo" id="b2">
<span>absolute box b2</span>
</div>
<div class="foo" id="b3">
<span>absolute box b3</span>
</div>
</div>
我已将此fiddle上的此问题修复,供您了解。