JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example1">
    <div class="outer">
        <div class="inner">z-index works fine</div>
    </div>
</div>
<div id="example2">
    <div class="outer">
        <div class="inner">z-index doesn't work</div>
    </div>
</div>
<div class="backdrop">
    
</div>

CSS

.outer {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100px;
    height: 100px;
}
.inner {
    position: relative;
    z-index: 5;
}
#example1 .outer {
    position: absolute;
    top: 0;
}
#example2 .outer {
    position: fixed;
    top: 150px;
}
.backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
}