Question

我有3个元素，两个在同一级别，一个孩子，都有固定的位置。我需要设置z-index属性以将父级置于底部，将元素置于中间的同一级别，将子级置于顶部。

我尝试为孩子设置更高的z-index，但它不起作用。

<div class="red">
    <div class="blue"></div>
</div>
<div class="green"></div>

以下是案例http://jsfiddle.net/udENm/21/（我需要red位于底部，green位于中间，blue位于顶部，仍保持red和{ {1}}在同一级别上。）

我的CSS就像这样

green

Answer 1

z-index属性仅在包含元素的stacking context内生效。

换句话说，给定同一父元素中的一堆块元素，您可以非常轻松地控制它们的前后排序。但是，z-index只能控制此父元素中的前后排序，而不能控制全局上下文中的排序。

因此，您可以在.blue内向后和向后移动.red。您也可以在z平面中切换.red和.green。但是，您无法将.green放在.red和.blue之间，因为它们位于不同的堆叠上下文中。

修改堆叠上下文仅适用于流中的元素。如果您使用position:absolute，则可以执行此操作。见Rick Calder的回答

Answer 2

将您的定位设置为绝对，并完全从父div（红色）中删除z-index。 http://jsfiddle.net/calder12/udENm/32/

.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}

.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}

.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}

Answer 3

绿色块z-index需要低于红色块。我用的是CSS而不是你发布的那个：

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: absolute;
    top:50%;
    left:50%;
    z-index: 5;
    width: 50px;
    height: 50px;
}

工作正常，你可以看到绿色现在是z-index 1，红色是z-index 2，蓝色块有绝对定位。

Answer 4

Z-index is relative in a way to the parent。红色已经是2，而蓝色只是z-index 5与它的兄弟姐妹相比，而不是像Green这样的外部元素。

每个堆叠上下文都是自包含的：在堆叠元素的内容之后，整个元素将被视为父堆叠上下文的堆叠顺序。

Answer 5

有点像这样？

http://jsfiddle.net/kBv7R/

HTML

    <div class="foo">
        <div class="child"></div>
         <div class="bar"></div>
    </div>

CSS

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 5;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: fixed;
    left: 90px;
    top: 90px;
    z-index: 6;
    width: 50px;
    height: 50px;
}

元素z-index css属性

5 个答案: