JSFiddle - React, Tailwind, and code Playground

HTML

<div style="border:2px solid #333; position: relative; width: 204px; height: 150px; z-index: 50;">
    <div style="background-color: red ; position: absolute; width: 200px; height: 200px; top: 60px; z-index: 10">
У этого блока значение z-index самое большее. Ожидаемое поведение: расположен поверх остальных блоков
</div>
</div>
<div style="border:2px solid #333; position: relative; width: 204px; height: 150px; left:65px;">
    <div style="background-color: blue ; position: absolute; width: 200px; height: 200px; top: -110px; z-index: 5; color:#fff">
Этот блок должен быть перекрыт, так как у него меньшее значение z-index
</div>
</div>