<div>
  <span class="turquoise">
    One
  </span>
</div>
<div>
  <span class="peterriver">
    Two
  </span>
</div>
<div>
  <span class="amethyst">
    Three
  </span>
</div>
.turquoise, .peterriver, .amethyst{
  box-sizing: border-box;
  color: #fff;
  padding: 15px;
  position: absolute;
  width: 100px;
  height: 100px;
}

div:first-child{
  transform: translateX(0);
}

div:nth-child(2){
  opacity: 0.9;
}

.turquoise{
  background-color: #1abc9c;
  left: 0;
  top: 0;
  z-index: 3;
}

.peterriver{
  background-color: #3498db;
  left: 50px;
  top: 50px;
    z-index: 2;
}

.amethyst{
  background-color: #9b59b6;
  left: 100px;
  top: 100px;
  z-index: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.