Question

无论我尝试什么，儿童div总是在父母面前。有没有办法让孩子在父母的后面？ z-index似乎不起作用。

注意：

我不想更改html
父级必须具有z-index
复制＆＃34;如何使用z-index＆＃34;使子元素高于父元素;没有语法意义，也很难阅读，并没有真正帮助我。

<div id='parent'>
    <div id='child'>
    </div>
</div>

#parent {
    width:50px;
    height:50px;
    background:red;
    position:absolute;  
    z-index:100;
}

#child {
    width:50px;
    height:50px;
    background:blue;
    position:absolute;  
    z-index:-100;
}

JSFiddle

Answer 1

不要让child div实际包含在parent中。由于这些职位是绝对的，你可以这样做：

<div id='parent'>
</div>
<div id='child'>
</div>

现在，如果z-index的{{1}}小于parent的{{1}}，它将显示在最顶层。

Answer 2

您无法实现这一点，因为它们属于同一个stacking context。但是，可以将opacity: 0设置为子项

＆＃13;

#parent {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 1;
}

#child {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute;	
  z-index: 2;
  opacity: 0;
}

＆＃13;

<div id='parent'>
  <div id='child'></div>
</div>

＆＃13;

Answer 3

AFAIK无法将父母置于孩子之上。但是，如果不更改HTML，您可以使用:before或:after创建新元素，并将置于孩子之上;

#parent:after {
    background: red;
    content: "ON TOP";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

http://jsfiddle.net/j6e9qho3/12/

编辑：或者看到父母在孩子身上的影响是孩子根本不可见，最简单的事情可能是#child {display: none}。但我认为，由于其他原因，这对你不起作用。

也许如果你解释了你想要实现的目标，我们可以提供更多帮助。

Answer 4

通过与父母内部的兄弟姐妹打交道，我能够实现我想要的目标......

<div id='parent'>

    <div id='child1'>
    </div>

    <div id='child2'>
    </div>
</div>

其中parent是具有自己的z-index的透明容器，但子项是绘制的实际颜色方块（每个都有自己的z-index）。

使用z-index在父div的后面创建子div？

4 个答案: