Click on button that is behind an element

Question

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>

Litigious

Answer 1

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

Fiord

But then I am not able to click on the other button? – Litigious

Sounds like a fundamental rethink of the HTML is required. – Citation

@Litigious I updated my answer with your requirements – Fiord

@Citation well it is petty simple in fact, OP just needs to move the textarea and button out of the .card div and use pointer-events:none; no other CSS needed. – Fiord

This works. It is important to note that you set pointer-events: none; on the parent div specifically but NOT on the children (like the button, you may need to explicitly add div > * {pointer-events: auto;} or something similar) and you'll still be able to click them, but also click through the surrounding div to buttons behind it. Last, probably also worth mentioning that this has compatibility concerns on older browsers (in case your target demographic says you should care about such things). – Furlana

Answer 2

Use z-index in this case.

<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute; z-index:1;">This is a background button</button>

DEMO

This positions the element in the depth field higher than everything else. The higher the number, the higher the stack order.

z-index: 1;

Though, z-index requires positioning such as position: absolute; or position: relative;.

Read a great article about Z-Index here.

Tran

The issue with this is that the button then appears above my background DIV image. Is there any way to keep it behind the image and make it clickable? – Litigious

Answer 3

Give the button a positive z-index

button {
    position: absolute;
    z-index: 1;
}

Metamer

The issue with this is that the button then appears above my background DIV image. Is there any way to keep it behind the image and make it clickable? – Litigious

Answer 4

For those who have the same issue as I do where(not restructuring your HTML):

1. div 1 is on top of div 2
2. Both div 1 and 2 needs to be clickable/interactive
3. However div 2 should be infront of div 1

Apply the following codes to div 2:

div2 {
  position: absolute; // to manipulate position
  z-index: 999; // manipulating the position, putting it in front of div1
  pointer-events: visible; // making it interactive, clickable
}

Squad