Z-index问题：将子元素放置在父容器后面

Question

我遇到了一种情况，其中在父容器中有2个子元素。第一个子元素占据了整个父容器的内容。 另一个子元素应该在父容器下面显示。目前它显示在父容器的上方。我正在努力将第二个子元素放置在父容器后面。

是否可能这么做？如果可以，我该如何解决。

注意：我不能摆脱父容器的z-index，因为在这种情况下它是模态框。

HTML

 <div class="parent">
    <h1>Parent</h1>
      <code>position: absolute;<br/>
      z-index: 1;</code>

    <div class="outer-child">
    <br/><br/><br/><br/><br/>
        <h1>Outer Child</h1>
        <code>position: relative;<br/>
        z-index: 1;</code>
    </div>

    <div class="child">

        <h1>Child</h1>
        <code>position: absolute;<br/>
        z-index: -1;</code>
    </div>
</div>

CSS

 html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

.outer-child {
    z-index: 1;
    opacity: 0.8;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #ffc;
    padding: 20px 10px 10px;
    height: 200px;
}

JSFiddle

- Sushanth --

---

重新组织你的HTML代码，保持div标签分离。这将有所帮助。可以像这样：<div -parent></div><div -child></div> - Ananthaprakash

@Ananthaprakash 无法重新组织 HTML，因为内容是模态框的一部分。 - Sushanth --

Answer 1

将父元素的z-index设置为initial

html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: initial;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

https://jsfiddle.net/3269rjqh/1/

- QBM5

---

没错。看起来我忘记添加一个用例了，在这种情况下，父级实际上是一个模态框，我不能删除 z-index，因为它必须堆叠在页面上方。 - Sushanth --

是的，知道这些会很有帮助。虽然情况变得更加复杂，但理想情况下将这些元素包装在一个具有position: relative属性的元素中应该可以解决问题，请尝试使用实际示例更新您的fiddle。 - QBM5

实际上，我甚至尝试了那种方法，但它并没有起作用。我在这里提供的用例是原始问题的最简子集。但这并没有帮助。 - Sushanth --

尝试使用实际示例更新你的代码片段，这样我就可以测试修复而不是猜测。 - QBM5

谢谢你的建议。将 modal 容器 (z-index: initial) 包裹在另一个元素中，并将其 z-index 设置为该元素，问题得到了解决。 - Sushanth --

Answer 2

一旦一个元素有了 z-index，它就会创建一个新的平面，因此任何具有 z-index 的子元素始终会在其上方（在 z-平面上）。您可以从父级中删除 z-index，或相应地重新构造您的 HTML。

- Stuart

Answer 3

html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

<div class="parent">
    <h1>Parent</h1>
      <code>position: absolute;<br/>
      z-index: 1;</code>
</div>
<div class="child">
        <h1>Child</h1>
        <code>position: absolute;<br/>
        z-index: -1;</code>
</div>

- Ananthaprakash

---

这是一个相当简单的解决方案。问题在于我无法重新组织HTML，因为它是一个模态框。 - Sushanth --