JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area"></div>
<div id="block"></div>

CSS

#area {
    background: #c00;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 0;
}

#block {
    width: 200px;
    height: 200px;
    margin: 20px;    
    border-radius: 3px;
    background: rgba(0,0,0,0.1);
    border: 1px solid #ccc;    
    position: relative;
    z-index: 1;
}

JavaScript

// top left and botom right corners of the clickable area
var x1 = 10, x2 = 30, y1 = 10, y2 = 30;
$(document).on('click', '#block', function(e) {
    // get x/y coordinates inside    
    var cx = e.clientX;
    var cy = e.clientY;
    offset = $(this).offset();
    x = cx-offset.left;
    y = cy-offset.top;
    
    // if our click coordinates are within constrains, show an alert
    if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
      alert('click!');            
    }
});