How to put the child behind the parent with z-inde

Question

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

is this possible? Jsfiddle

Answer 1

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/

Answer 2

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.

Answer 3

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