layers debug

by toubia95

HTML

<div id="html">
  <div class="parent box">
      Parent
      <div class="child box">Child</div>
  </div>
  <div class="nonchild box">Non-Child</div>
</div>

CSS

.box{
  width:100px;
  height:100px;
}

#html {
  position:static;
}

.parent {
  background-color:red;
  z-index:0;
  position:static;
}

.child {
  background-color:green;
  z-index:2;
  position:relative;
  width: 50px;
}

.nonchild {
  background-color:blue;
  z-index:1;
  /*position:relative;*/
  margin-top: -50px;
}