Click on button that is behind an element

button, click, css, html

Solution

You can use `pointer-events:none;` on `.card`. This will disable the click event on the `.card` div and user can click on the button behind it. More info here (MDN).

Here is an example showing how you can enable the click envent on an element hidden behind another one :

button {
  margin: 50px;
}

button:focus {
  background: red;
}
button:hover {
  background: teal;
}

.inFront {
  pointer-events: none;
  position: absolute;
  top: 25px; left: 25px;
  right: 25px; height: 150px;
  border: 3px solid red;
  background: rgba(0, 0, 0, .5);
}

<button onclick="alert('button clicked');">I am a button behind the .inFront div</button>
<div class="inFront"></div>

In this example, the `.inFront` div is over the button but the `pointer-events: none;` property on the div allows the button to be clicked, focused and hovered.

Regarding your example, the drawback is that it will also disable the textarea and the "card button" so you will have to change your HTML and move both textarea and card button out of the `.card` div so they are still clickable. Here is a demo :

DEMO

Problem

I have a button that is in a div, that is behind another div. The second div overlaps the first by using the css: `position: absolute;` Therefore the button is not clickable. Is there any way I can make it clickable like a normal button? Example: jsfiddle ``` body { background-color: blue; } .stack { width: 320px; height: 240px; position: absolute; top: 50%; left: 50%; background-color: white; margin-top: -120px; margin-left: -160px; } .background { width: 320px; height: 240px; background-image: url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png'); top: 0px; left: 0px; position: absolute; } .card { pointer-events: none; width: 320px; height: 240px; background-image: url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png'); top: 0px; left: 0px; position: absolute; } ``` ``` <div class="stack"> <div class="background" onclick="alert('background clicked');"> <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button> <div class="card"> <button onclick="alert('card-button clicked');">This is a card button</button> <textarea style="left:100px; top:100px; position: absolute;">This is a card textarea</textarea> </div> </div> </div> ```

Original source