JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<canvas id="canvas">canvas</canvas>
<!-- <div class="pos pos-1">pos-1</div> -->
<!-- <div class="pos pos0">pos0</div>
<div class="pos pos1">pos1</div> -->
<div class="pos pos2">pos2
    <div>pos2 div</div>
</div>

CSS

#canvas, .pos {width: 100px;height: 100px;position: absolute;}
#canvas {background: red; top: 0px; left: 0px;z-index: -1;}
.pos-1 {background: green; top: 10px; left: 10px;z-index: -2;}
.pos0 {background: yellow; top: 20px; left: 20px;z-index: 0;}
.pos1 {background: blue; top: 30px; left: 30px;z-index: 1;}
.pos2 {background: maroon; top: 40px; left: 40px;z-index: 2;}
.pos2 div {background: blue; position:absolute; left: -20px; z-index: -10;}