JSFiddle - React, Tailwind, and code Playground

by Reiot

HTML

<div id="map">
    <div id="ground">
        <div id="first" class="e">1st</div>
        <div id="second" class="e">2nd</div>
    </div>
    <div id="sky">
        <div id="third" class="e">3rd</div>
        <div id="fourth" class="e">4th</div>
    </div>
</div>
<ul>
    <li>Left Click to Bring Front</li>
    <li>Right Click to Bring Down</li>
</ul>

CSS

#map { 
    position: relative; 
    width: 100%;
    height: 500px;
    background-color: gray;
}
.e {
    position: absolute;
    text-align: center;
}
#ground { 
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ededed;
    z-index: 1000;
}
#sky {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;
}
#first {
    width: 100px;height: 100px;
    background-color: yellow;
}
#second {
    width: 50px;height: 200px;
    background-color: green;
}
#third {
    width: 200px;height: 50px;
    background-color: red;
}
#fourth {
     width: 50px;height: 300px;
     background-color: blue;
 }

JavaScript

$(function(){
    $('#first').add('#second').add('#third').add('#fourth')
        .draggable()
        .click(function(){
            $(this).css('z-index',9999);
            return false;
        })
        .bind('contextmenu',function(){
            $(this).css('z-index','auto');
            return false;
        });
});