JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<div class="container">
<div class="test green">
Test
<div class='test-child red'>
I should be on top<br/>
I should be on top<br/>
I should be on top<br/>
I should be on top<br/>
I should be on top<br/>
</div>
</div>

<div class="container">
<div class="test yellow">
But instead I'm on top<br/>
But instead I'm on top<br/>
But instead I'm on top<br/>
</div>
</div>
</div>

CSS

.container{
 position: relative;
}

.test {
  position: relative;
  will-change: opacity;
}

  
.test-child {
  position: absolute;
  z-index: 20;
}

/* Unimportant */

.green {
    background: green;
}

.red {
    background: red;
}

.yellow {
  background: yellow;
}