Examples

by Richard Hunter

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index -->

<div class="dashed-box">
  Dashed box
  <span class="gold-box">Gold box
    <span class="green-box-1"></div>
  </span>

  <span class="green-box">Green 
  <span class="green-box-1"></div>
  box</span>
</div>

CSS

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}

.gold-box {
  position: absolute;
  z-index: 3;
  /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}

.green-box {
  position: absolute;
  z-index: 4;
  /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
}
.green-box-1 {
  
  position: relative;
  display: inline-block;
  z-index: 0;
  /* put .green-box above .dashed-box */
  background: green;
  width: 4em;
  height: 2em;
  top: 10px;

}