JSFiddle - React, Tailwind, and code Playground

by Niels Krijger

HTML

<div class="red-parent">
  <div class="red-child">
    Red
  </div>
</div>

<div class="blue-parent">
  <div class="blue-child">
    Blue
  </div>
</div>

CSS

.red-parent {
  position: absolute; /* this causes a new stacking context */
  border: 2px dashed DarkRed;
  z-index: 999; /* despite this high value, red still appears below blue */
}

.red-child {
  padding: 2rem;
  background-color: IndianRed;
}

.blue-parent {
  position: absolute; /* this causes a new stacking context */
  top: 4rem;
  left: 3rem;
  border: 2px dashed DarkBlue;
}

.blue-child {
  padding: 2rem;
  background-color: CornflowerBlue;
}