JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<img src="http://placehold.it/200x200" alt="">

<div id="above"></div>

<div id="block"></div>

<a id="front" href="#"></a>
<a id="front-bg" href="#"></a>

CSS

#block
{
    width: 200px;
    height: 100px;

    top: 300px;
    
    background-color: blue;

    position: absolute;
}

#above
{
    width: 200px;
    height: 100px;
    top: 200px;

    background-color: black;

    z-index: 40;

    position: absolute;
}

#front
{
    position: absolute;
    left: 0;
    top: 0;
    
    width: 100px;
    height: 400px;
    
    display: block;

    z-index: 10;

    border: solid 1px red;
}

#front-bg
{
    position: absolute;
    display: block;
    
    left: 100px;
    top: 0;
    
    width: 100px;
    height: 100px;
    
    background-color: yellow;
}