How to pass mouse events through absolutely-positioned element with CSS?

To pass mouse events through absolutely-positioned element with CSS, we set the pointer-events property.

For instance, we write

<div class="some-container">
  <ul class="layer-0 parent">
    <li class="click-me child"></li>
    <li class="click-me child"></li>
  </ul>

  <ul class="layer-1 parent">
    <li class="click-me child"></li>
    <li class="click-me child"></li>
  </ul>
</div>

to add elements.

Then we write

.parent {
  pointer-events: none;
}
.child {
  pointer-events: all;
}

to stop the parent mouse events with pointer-events: none;

And we make the child accept all the mouse events with pointer-events: all;.