html给span标签设置index,html – 绝对定位嵌套元素的z-index

您需要查看https://css-tricks.com/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以供您理解.