Css 如何使子元素的z索引高于父元素？

假设我有以下代码：

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

你好，世界

本节：

现在，我需要在上面的

中添加

，但是在JSFIDLE中，您可以看到在

之前呈现的子元素

如果删除

父项

类

位置

或

z索引

，则一切正常。这是我需要的正确行为：

---

如何使用

z-index

并在不从页面中删除任何内容的情况下执行此操作？

这是不可能的，因为子级的

z-index

设置为与其父级相同的堆叠索引

---

您已经通过从父元素中删除z索引解决了此问题，请保持此状态，或者将元素设为兄弟元素而不是子元素。

这是不可能的，因为子元素的z索引设置为与其父元素相同的堆叠索引

---

通过从父级中删除z索引，您已经解决了该问题，可以将其保持为这样，或者使元素成为同级元素而不是子元素。

要在不删除任何样式的情况下实现所需的功能，您必须使“.parent”类的z索引大于“.wholePage”类

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

---

jsiddle:

要在不删除任何样式的情况下实现所需的功能，必须使“.parent”类的z索引大于“.wholePage”类

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

---

jsiddle:

给出父级z索引：-1，或不透明度：0.99

给出父级z索引：-1，或不透明度：0.99

在子元素中使用非静态位置和更大的z索引：

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}

---

在子元素中使用非静态位置和更大的z索引：

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}

---

没有什么是不可能的。使用原力

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

---

没有什么是不可能的。使用原力

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

---

尝试使用此代码，它对我有效：

z-index: unset;

---

尝试使用此代码，它对我有效：

z-index: unset;

---

---

谢谢Kyle，但正如我前面提到的，我必须在不删除任何内容的情况下解决问题。

z-index

不是继承的。这不是继承。

z-index:50

显示在

z-index:100

上方，因为1和50位于基本堆叠上下文中，而100位于1的堆叠上下文中。因为50大于1，所以50出现在1和1上下文中的所有内容之上，但100仍然在1内保留

z-index

100。好的，这里是1、2和3。我一直都知道父元素设置了它所有子元素的z-索引（我知道它不是继承的..不知道我为什么这么写：D）@Kyle:如果你不知道为什么你写的不正确，那么编辑答案使其正确。谢谢Kyle，但正如我之前提到的，我必须在不删除任何内容的情况下解决问题。

z-index

不是继承的。这不是继承。

z-index:50

显示在

z-index:100

上方，因为1和50位于基本堆叠上下文中，而100位于1的堆叠上下文中。因为50大于1，所以50出现在1和1上下文中的所有内容之上，但100仍然在1内保留

z-index

100。好的，这里是1、2和3。我一直都知道父元素设置了它所有子元素的z-索引（虽然我知道它不是继承的。）不知道我为什么这样写：D）@Kyle：如果你不知道为什么你写的不正确，那么就编辑答案使其正确。如果人们想知道不透明度：0.99是关于什么的，我建议你阅读这个链接。这在IE 11中似乎不起作用，本页面上的每个人都应该阅读前面评论中链接的文章！说真的，关于z-index你需要知道的一切-非常有用的东西，在混合中也撒了一些真正的银弹。如果人们想知道什么是不透明度：0.99，我建议你阅读这个链接。这在IE 11中似乎不起作用，本页面上的每个人都应该阅读前面评论中链接的文章！说真的，你需要知道的关于z-index的一切——非常有用的东西，在混合中也撒了一些真正的银弹。虽然这个代码片段可以解决这个问题，但确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。如果我们不能更改父级的样式，那么这是解决问题的完美解决方案。我试过了，很好。谢谢>如果删除父类位置或z索引，一切正常。您刚刚删除了父级z索引，我相信OP无法修改。位置：relative更改了父级的堆叠顺序。我认为这可能是因为relative使“parent”脱离了当前的页面结构。检查这个：或者，将父z-index设置为

auto

。虽然这个代码片段可以解决这个问题，但确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。如果我们不能更改父级的样式，那么这是解决问题的完美解决方案。我试过了，很好。谢谢>如果删除父类位置或z索引，一切正常。您刚刚删除了父级z索引，我相信OP无法修改。位置：relative更改了父级的堆叠顺序。我认为这可能是因为relative使“parent”脱离了当前的页面结构。检查此项：或者，将父z-index设置为

auto

。要详细说明“使用非静态位置”，未指定位置属性的元素的默认行为将默认为“static”。在给定位置之前，这缺乏左、右、下和上的功能，这同样适用于z索引。为了详细说明“使用非静态位置”，没有指定位置属性的元素的默认行为将默认为“静态”。在给定位置之前，它缺少左、右、下和上的功能，