CSS - make button clickable underneath another element? - css

Question

I have a button inside a div, the button is positioned on the left with display flex
I have another div below that that also contains a button.
I have positioned the bottom div on top of the top div by giving the bottom div a negative top margin.
The button in the bottom div is still clickable but now the button in the top div is not clickable because the bottom div is covering it.
Is it possible to have BOTH buttons clickable in this situation.
I know I can use pointer-events: none; on the top div but I want both clickable
I know I can rearrange the layout but is it it possible like this.
.wrap {
max-width: 800px;
border: 1px solid grey;
}
.top-button button {
display: flex;
margin-left: auto;
}
.bottom {
border: 1px solid red;
margin-top: -40px;
}
button {
cursor: pointer;
padding: 10px 15px;
}
<div class="wrap">
<div class="top-button">
<button class="btn">x</button>
</div>
<div class="bottom">
<button class="btn">Click</button>
</div>
</div>

Answer 1

The only way I know of to do this would be to manually catch the click-events on your top-button div and then somehow invoke the click handlers of underlying elements. You could use Event.preventDefault() to prevent the event from bubbling up the DOM and then use Document.elementsFromPoint() to see if you hit your button and if so, invoke its click handler.