0

我有 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并green处于同一水平）。

我的 CSS 是这样的

.red {
    position: fixed;
    z-index: 2;
}

.green {
    position: fixed;
    z-index: 2;
}

.blue {
    position: fixed;
    z-index: 5;
}
4

5 回答 5

2

该z-index属性仅在包含元素的堆叠上下文中有效。

换句话说，给定同一个父元素中的一堆块元素，你可以很容易地控制它们的从前到后的顺序。但是，z-index只能在此父元素内控制从前到后的排序，而不能在全局上下文内控制。

因此，您可以随心所欲地.blue前后移动.red。您也可以随意在 z 平面中.red随意切换。.green但是，您不能将它们放在和.green之间.red，.blue因为它们位于不同的堆叠上下文中。

编辑 堆叠上下文仅适用于流中的元素。如果您使用position:absolute，那么您可以执行此操作。请参阅 Rick Calder 的回答

于 2012-10-22T15:09:51.570 回答
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;
}

​</p>

于 2012-10-22T15:10:04.743 回答
1

绿色块 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，蓝色块具有绝对定位。

于 2012-10-22T15:11:46.880 回答
0

Z-index 在某种程度上是相对于 parent 的。红色已经是 2，与它的兄弟姐妹相比，蓝色的 z-index 仅为 5，但与绿色等外部元素相比则不然。

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

于 2012-10-22T15:10:38.910 回答
0

有点像这样？

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;
}

​</p>

于 2012-10-22T15:14:53.390 回答