JSFiddle - React, Tailwind, and code Playground

HTML

<div class="megaRoot">
</div>
<div class="root">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

CSS

.megaRoot,
.root {
    position: relative;
    background-color: black;
    width: 300px;
    height: 300px;
}
.megaRoot {
  background-color: yellow;
  z-index: 5;
}
.root >.child1 {
    position: relative;
    top: -40px;
    float: right;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1;
}

.root >.child2 {
    position: relative;
    top: -40px;
    width: 100px;
    height: 100px;
    background-color: blue;
    z-index: 10;
}