JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<div id="background"></div>
<div id="foreground"></div>

CSS

html, body { height: 100% }
#background {
    height: 100%;
    background: red;
}

#foreground {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: blue;
    opacity: 0.5;
}

JavaScript

$('#background').on('mousedown contextmenu', function(e) {
    e.preventDefault();
    alert(e.type + ' on #background, wtf?');
});

$('#foreground').on('mousedown contextmenu', function(e) {
    var $this = $(this),
        below;
    e.preventDefault();
    console.log(e.type + ' on #foreground, hiding to find element below');
    $this.hide();
    console.log('#foreground hidden');
    below = document.elementFromPoint(e.pageX, e.pageY);
    console.log('behind #foreground: ', below);
    $this.show();
    console.log('#foreground shown');
});