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

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 {

    position: relative;

    width: 750px;

    height: 7150px;

    background: red;

    border: solid 1px #000;

    z-index: initial;

}

.child {

    position: relative;

    background-color: blue;

    z-index: -1;

    color: white;

}

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