JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<div id="first-stacking-context">
  <small>Parent stacking context</small>
  <div class="child"><small>First child</small></div>
  <div class="child">
    <small>Second child</small><br>
    <small>Child stacking context</small>
    <div class="grandchild">First gandchild</div>
    <div class="grandchild">Second gandchild</div>
    <div class="grandchild">Third gandchild</div>
  </div>
  <div class="child"><small>Third child</small></div>
</div>

CSS

* {
  font-family: sans-serif;
}

#first-stacking-context {
  background-color: rgba(253, 237, 16, 0.5);
  padding: 8px;
  height: 320px;
  position: relative;
}

.child {
  position: absolute;
}

#first-stacking-context .child:nth-child(2) {
  background-color: rgba(153, 237, 16, 0.9);
  top: 25px;
  left: 25px;
}

#first-stacking-context .child:nth-child(3) {
  background-color: rgba(53, 237, 16, 0.9);
  top: 35px;
  left: 50px;
  height: 100px;
}

#first-stacking-context .child:nth-child(4) {
  background-color: rgba(3, 137, 16, 0.9);
  top: 125px;
  left: 75px;
}

.grandchild {
  position: absolute;
}

#first-stacking-context .child:nth-child(3) :nth-child(4) {
  top: 40px;
  background-color: 
}