如何让父元素出现在子元素上方

Question

我有两个嵌套的CSS元素。我需要让父元素位于子元素的顶部，即z轴的上方。仅设置z-index是不够的。

我无法在子项上设置负z-index，它会将其设置为我实际页面上的页面容器下方。这是唯一的方法吗？

http://jsbin.com/ovafo/edit

.parent {

  position:  relative;

  width: 750px;

  height: 7150px;

  background: red;

  border: solid 1px #000;

  z-index: 1;

}

.child {

  position: absolute;

  background-color: blue;

  z-index: 0;

  color: white;

  top: 0;

}

.wrapper

{

  position: relative;

  background: green;

  z-index: 10;

}

<div class="wrapper">

  <div class="parent">

    parent parent

    <div class="child">

      child child child

    </div>

  </div>

</div>

Answer 1

幸运的是存在一个解决方案 您必须为父级添加包装器并更改此包装器的z-index（例如10），并将子级的z-index设置为-1：.parent {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 750px;&nbsp; &nbsp; height: 7150px;&nbsp; &nbsp; background: red;&nbsp; &nbsp; border: solid 1px #000;&nbsp; &nbsp; z-index: initial;}.child {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; color: white;}.wrapper {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background: green;&nbsp; &nbsp; z-index: 10;}<div class="wrapper">&nbsp; &nbsp; <div class="parent">parent parent&nbsp; &nbsp; &nbsp; &nbsp; <div class="child">child child child</div>&nbsp; &nbsp; </div></div>