I have a button that is on 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
HTML:
<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>
CSS:
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;
}
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) .
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
Give the button a positive z-index
button {
position: absolute;
z-index: 1;
}
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>
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;
.
For those who have the same issue as I do where(not restructuring your HTML):
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.