JSFiddle - React, Tailwind, and code Playground

by pimvdb

HTML

<div id="div">abc</div>

<div id="parent">
    <div id="overlay"></div>
</div>

<div id="div2">abc</div>

CSS

#overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
}

#div2 {
    position: absolute;
    top: 300px;
}

JavaScript

function isObscured(element) {
    // get element at element's position
    var elem = document.elementFromPoint(element.offsetLeft, element.offsetTop);

    // return whether obscured element has same parent node (will also return false if
    // element === elem)
    return elem.parentNode !== element.parentNode;
}

alert(isObscured(document.getElementById('div')));
alert(isObscured(document.getElementById('div2')));