Javascript 元素z索引css属性

我有三个元素，两个在同一层，一个孩子，都有固定的位置。我需要设置z索引属性，将父函数放置在底部，中间元素位于同一级别，顶部的子元素。

我试着为孩子设置一个更高的z指数，但它不起作用

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

---

z-index

属性仅在包含元素的范围内有效

换句话说，给定同一父元素中的一组块元素，您可以非常轻松地控制它们的前后顺序。但是，

z-index

只能控制此父元素中的前后顺序，而不能控制全局上下文中的前后顺序

因此，您可以在

.red

中随心所欲地前后移动

.blue

。您还可以在z平面上随意切换

.red

和

.green

。但是，不能将

.green

放在

.red

和

.blue

之间，因为它们处于不同的堆叠上下文中

编辑

---

堆叠上下文仅适用于流中的元素。如果使用

position:absolute

，则可以执行此操作。请参见Rick Calder的答案，

z-index

属性仅在包含元素的范围内有效

换句话说，给定同一父元素中的一组块元素，您可以非常轻松地控制它们的前后顺序。但是，

z-index

只能控制此父元素中的前后顺序，而不能控制全局上下文中的前后顺序

因此，您可以在

.red

中随心所欲地前后移动

.blue

。您还可以在z平面上随意切换

.red

和

.green

。但是，不能将

.green

放在

.red

和

.blue

之间，因为它们处于不同的堆叠上下文中

编辑

---

堆叠上下文仅适用于流中的元素。如果使用

position:absolute

，则可以执行此操作。请参阅Rick Calder的答案

将您的定位设置为绝对，并从父分区（红色分区）中完全删除z索引

---

​

将您的定位设置为绝对，并从父div（红色）中完全删除z索引

​

。红色已经是2了，和它的同级元素相比，蓝色的z指数仅为5，但与绿色等外部元素相比则不然

每个堆叠上下文都是自包含的：在堆叠元素的内容后，将按照父堆叠上下文的堆叠顺序考虑整个元素

。红色已经是2了，和它的同级元素相比，蓝色的z指数仅为5，但与绿色等外部元素相比则不然

每个堆叠上下文都是自包含的：在堆叠元素的内容后，将按照父堆叠上下文的堆叠顺序考虑整个元素

---

绿色块的z指数需要低于红色块的z指数。我使用了这个CSS，而不是您发布的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索引1，红色是z索引2，蓝色块具有绝对定位。

绿色块z索引需要低于红色块。我使用了这个CSS，而不是您发布的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，蓝色块具有绝对定位。

有点像这样

HTML

​

有点像这样

HTML

---

​

当你说你需要红色和绿色在同一级别上时，你的意思是它们必须具有相同的z索引，还是只是它们需要在视觉上显示在同一级别上？@SimonCarlson不，它们不需要具有相同的z索引，但需要具有z索引，因为它们可能包含在另一个元素中，这里的问题是，即使子元素有另一个z索引集，子元素也会在某种程度上继承其父元素的z索引。childs z-index仅与同一父元素内的其他子元素相关，而同一z-index对父元素外的元素没有影响。请看下面我的回答，它解决了您当前的问题。是否需要固定定位？在这里，它使用的是绝对值，当你说你需要红色和绿色在同一级别上时，你的意思是它们都必须具有相同的z索引，还是只是它们需要在视觉上显示在同一级别上？@SimonCarlson不，它们不需要具有相同的z索引，但需要具有z索引，因为它们可能包含在另一个元素中，具有可能的z-index属性集。这里的问题是，即使子元素有另一个z-index集，子元素也会在某种程度上继承其父元素的z-index。childs z-index仅与同一父元素内的其他子元素相关，而同一z-index对父元素外的元素没有影响。请看下面我的回答，它解决了您当前的问题。是否需要固定定位？在这里，它使用的是绝对值

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

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

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