CSS - make button clickable underneath another element?

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>

Just rearrange the HTML that would be the easiest option.

cloned
– cloned

2022-02-23 11:01:39 +00:00
Commented Feb 23, 2022 at 11:01 — cloned
– cloned, Commented Feb 23, 2022 at 11:01

Theobald Beyer · Accepted Answer · 2022-02-23 10:56:14Z

2

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.

answered Feb 23, 2022 at 10:56

Theobald Beyer

1841 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS - make button clickable underneath another element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related