JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="target">
  A. Overflow Visible
  <div id="b" class="target">
    B. overflowing
  </div>
  <div id="c" class="target">
    C. fully outside
  </div>
</div>

CSS

.target {
   border-width: 1px;
   border-color: black;
   border-style: solid;
}
#a {
  background-color: green;
  height: 100px;
  width: 400px;
}
#b {
  position: absolute;
  width: 200px;
  height: 100px;
  bottom: 50px;
  top: 50px;
  background-color: blue;
}
#c {
  position: absolute;
  width: 150px;
  height: 100px;
  left: 250px;
  top: 150px;
  background-color: red;
}

JavaScript

const divs = document.getElementsByClassName("target");

for (const el of divs) {
  el.addEventListener("click", (e) => {
    console.log("Click Event: " + e.currentTarget.id)
  });
}