Why does click propagation seem to jump over the top element of the next stacking context?

Here's my example code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.overlay {
  position: fixed;
  width: 200px;
  height: 150px;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.7);
  cursor: pointer;
}

img.overlay__first-child {
  position: fixed;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  z-index: 3;
  cursor: pointer;
  background-color: green;
}

.overlay img {
  position: relative;
  z-index: 2;
}

.overlay__second-child {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<!-- language: lang-html -->

<div class="no-styling" onclick="console.log('no-styling')">
  <div class="overlay" onclick="console.log('overlay')">
    <img src="#" class="overlay__first-child" onclick="console.log('overlay__first-child')" />
    <img src="#" class="overlay__second-child" onclick="console.log('overlay__second-child')" />
  </div>

  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
  <p onclick="console.log('p')">Content to create a scrollbar</p>
</div>

<!-- end snippet -->

If I click on the p text that's behind the overlay, the log doesn't print p, but it does print no-styling. If I change the p tags into button tags, I see the same propagation jump. On the other hand, if I click directly on a p element, it logs p and no-styling, as expected. I've tested this on Firefox and Google Chrome and see the same results.

For clarification, I've added yellow dots to this screenshot to show locations I'm clicking:

Every yellow dot except the lowest prints overlay__first-child and overlay__second-child, if applicable; overlay; and no-styling, but none of these clicks prints p. The lowest dot prints no-styling and p.

Why does clicking on the overlay skip the onclick of the p tags?

There are two different mechanisms going on here:

• The mechanism that determines which is the "front" element that will receive the click event

• The mechanism that bubbles a received element from an element to its ancestors in the DOM hierarchy.

The first mechanism takes the coordinates of the cursor (mouse) and, among the elements that have that point in their area, looks at the Z-order in which these elements are ordered (front-to-back ordering). This ordering is not necessarily related to the DOM hierarchy -- it can be completely different from it as it can be freely determined by CSS. In your example case the overlay element is rendered in front of the p elements. That means that if the click happens on a coordinate that is included in the overlay element, it is the overlay element that gets the initial click event, no matter whether there is also a p element that has that coordinate. Or, if the click happens outside the overlay area, but still on the area of a p element, it is that p element that gets the initial click event.

The second mechanism concerns event bubbling. Some events bubble, others don't. Click events bubble. Bubbling means that after the original target element received the click event, its ancestors -- according to the DOM hierarchy, irrespective where those elements are rendered -- also get a click event, up to the root element of the DOM hierarchy. NB: any of the handlers of the click event can cancel this bubbling, so it does not propagate further up the DOM hierarchy.

I think with these principles the behaviour of your example is explained.

Alright the solution to this is to use bubbles and I shall show you how exactly, with an example:

const containerElement = document.querySelector('.container');
const containerChildElement = document.querySelector('.containerChild');

containerElement.addEventListener('click', ({ target }) => console.log(target));

Alright so how this works is it adds an event listener to the parent element (containerElement) which is supposedly behind the child element, there is a concept called bubbles which basically says the event must bubble up through the DOM tree and goes through all the children, the event.target property will store the childElement if you click on the part where the child and parent are overlapping.

The code might be slightly hard to read if you aren't familar with destructuring, basically the ({ target }) part just means event.target.

Hope this helps.