How to put the child behind the parent with z-index?

问题

I have this problem as described in the title, can't put the child_child behind all other parents?

is this possible? Jsfiddle

回答1:

Set z-index only for last child Fiddle and remove floating, change fixed to relative positioning:

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

Checked in main browsers - OK.

回答2:

Change .big's position to absolute.
Add z-index: -1; to 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>

回答3:

You need to set the z-index of the wrapper (big) first:

like this:

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

来源：https://stackoverflow.com/questions/28236167/how-to-put-the-child-behind-the-parent-with-z-index

标签

html

css

z-index