How to apply pointer-events for only one underneath element

Question

I have below code:

          <div className="my-div" />
              <button className="my-btn1">this button should be clickable</button>
              <button className="my-btn2">this button should not be clickable</button>
          </div>

The position of .my-div is relative and button's are absolute. If I set pointer-events:none for .my-div, both of buttons would be clickable, but I want .my-btn1 be clickable and .my-btn2 don't be clickable.

Answer 1

Declaring pointer-events: auto on my-btn1 appears to allow it to be clickable

.my-div {
  position: relative;
  pointer-events: none;
}

button {
  position: absolute;
  cursor: pointer;
}

.my-btn1 {
  pointer-events: auto;
}

.my-btn2 {
  right: 0;
}

<div class="my-div">
  <button class="my-btn1">this button should be clickable</button>
  <button class="my-btn2">this button should not be clickable</button>
</div>