您需要查看https://css-/almanac/properties/z/z-index/以快速了解所有这些.特别是它所说的部分：
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element 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;
}
absolute box b0
absolute box b1
popup box inside b1
absolute box b2
absolute box b3
我已将此修复于此fiddle以供您理解.
如果觉得《html给span标签设置index html – 绝对定位嵌套元素的z-index》对你有帮助，请点赞、收藏，并留下你的观点哦！
