如何使用z-index将孩子置于父母后面？

Question

我有标题中描述的这个问题，不能将child_child置于所有其他父母身后吗？

这可能吗？ Jsfiddle

Answer 1

仅为最后一个孩子Fiddle设置z-index并移除浮动，更改固定为相对定位：

CSS：

.big {
    position: relative;
    background-color:red;
    width:420px;
    height:100px;
}
.small {
    position:absolute;
    background-color:blue;
    top:10px;
    left: 10px;
    width:400px;
    height:150px;
}
.child_child {
    position:absolute;
    background-color:yellow;
    top:10px;
    width:400px;
    height:180px;
    z-index:-1;
}

在主浏览器中检查 - 好的。

Answer 2

• 将.big的位置更改为absolute。
• 将z-index: -1;添加到ul

.big {
  background-color: red;
  width: 420px;
  height: 100px;
  position: absolute;
}
.small {
  float: left;
  position: absolute;
  background-color: blue;
  top: 10px;
  width: 400px;
  height: 150px;
}
ul {
  z-index: -1;
  position: absolute;
}
.child_child {
  float: left;
  position: absolute;
  background-color: yellow;
  top: 10px;
  width: 400px;
  height: 180px;
}

<div class="big">
  <nav class="small">
    <ul>
      <li>
        <div class="child_child"></div>
      </li>
    </ul>
  </nav>


</div>

Answer 3

首先需要设置包装器（大）的z-index：

像这样：

.big{
    background-color:red;
    width:400px; height:100px;
    position:fixed;
    z-index:10;
}
.small{
    float:left; position:absolute;
    background-color:blue;
    top:10px;
    width:400px; height:150px;
    z-index:initial;
}
.child_child{
    float:left; position:absolute;
    background-color:yellow;
    top:10px;
    width:400px; height:180px;
    z-index:-1;
}

http://jsfiddle.net/PauloSegundo/v8Ljo77v/