JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<div class="before-container noclick">
 <div class="before box">before</div>
 <div class="before box fixed">before</div>
</div>
<div id="top">
    <div class="inside box">inside</div>
    <div class="inside box fixed">inside</div>
</div>
<div class="after box">after</div>
<div class="after box fixed">after</div>

CSS

div { pointer-events: auto }

body, html { width: 100%; height: 100% }
#top { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.box { position: absolute; width: 100px; height: 100px; }
.inside { background: #ddf; margin-left: 150px; }
.before { background: #cef; margin-left: 0px; z-index:2 }
.after { background: #eed; margin-left: 300px;}
.fixed { position: fixed; margin-top: 150px; }

.before-container { position: absolute; width: 200px; height: 250px;  z-index:1; background-color: rgba(255,0,0,.1)} 

.noclick { pointer-events: none }

JavaScript

$('div').not('.noclick').each(function(i, id){
    var el = $(this);
    el.click(function(){
        console.log(this);
        el.css('border', '1px solid red');
        setTimeout(function(){ el.css('border', 'none'); }, 300);
        return false;
    });
})