JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<div class="red1">
<div class="blue">
  blue child 1
</div>
</div>
<div class="red2">
<div class="blue">
blue child 2
</div>
</div>

CSS

body {
  padding: 30px;
}
.red1 {
  position:absolute;
  z-index:1;
  width: 400px;
  height: 200px;
  background: red;
}
.red2 {
  position:absolute;
  z-index:-999; /* adjusted */
  width: 400px;
  height: 200px;
  top:250px;
  background: red;
}
.blue {
  z-index: 9;
  padding: 10px;
  text-align: center;
  color: white;
  text-transform:uppercase;
  position:absolute;
  top:100px;
  left:100px;
  width: 150px;
  height:130px;
  background: blue;
  
}