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

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/

Answer 2

一旦元素具有z-index，它就会创建新的平面，因此任何具有z-index的子元素总是会“高于”它（在z平面中）。您可以从父项中删除z-index，也可以相应地重新构建HTML。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Z-index问题：在父容器后面堆叠子元素

3 个答案: