JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

CSS

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}
#container > div {
    width:250px;
    display: inline;
    position:absolute;
}
#right {
    float: right;
    background-color: #AAA;
    margin-left: 200px;
    z-index:1;
}
#left {
    float: left;
    background-color: #CCC;
    z-index:5;
}

JavaScript

$(document).ready(function(){
    $("div>div").on("mouseover", function(){$(this).css("z-index",1+parseInt($(this).css("z-index")));});
    //$("div>div").on("mouseout", function(){alert($(this).css("z-index"));});
});