Otro ejemplo de cajas con z-index

by Diego C Martin

HTML

<div id="exterior">
  <div class="interior">
  </div>
    <div class="int2">
  </div>
</div>

CSS

div {
  border:2px solid black;
}
#exterior {
  background-color: red;
  width: 200px;
  height:200px;
  margin:20px;
  position:relative;
}
.interior {
  background-color: blue;
  width: 100px;
  height:100px;
  position:absolute;
  left: 10px;
  top: 10px;
  z-index:2;
  opacity:0.5;
}
.int2 {
  background-color: green;
  width: 100px;
  height:100px;
  position:absolute;
  left: 40px;
  top: 40px;
  z-index:1;
}