z-index for elevation

by Mohammed Ismail Ansari

HTML

<div class="container">
  <div class="layer" id="layer1" onclick="alert('you clicked the div!');">
    <div class="text" onclick="alert('you clicked the text!');">
      This is some text
    </div>
  </div>
  <div class="layer" id="layer2">
  
  </div>
  <div class="layer" id="layer3">
  
  </div>
</div>

CSS

.container {
  margin: 100px;
  width: 200px;
  height: 200px;
  background-color: Yellow;
  position: relative;
}

.layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
}

.text {
  float: right;
  z-index: 3;
}

#layer1 {
  background: Green;
}

#layer2 {
  background: Blue;
  opacity: 0.3;
}

#layer3 {
  background: Red;
  opacity: 0.3;
}