[英]Add the Ability to click on buttons in DIV that is behind other DIV
I have a button that is on a div, that is behind another div.我有一个位于 div 上的按钮,位于另一个 div 后面。 The second div overlaps the first by using the css:第二个 div 通过使用 css 与第一个 div 重叠:
position: absolute;
Therefore the button is not clickable.因此该按钮不可点击。 Is there any way I can make it clickable like a normal button?有什么办法可以让它像普通按钮一样可点击吗?
HTML: 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: 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;
您可以使用pointer-events:none;
on .card
. 在.card
。 This will disable the click event on the .card
div and user can click on the button behind it. 这将禁用.card
div上的click事件,用户可以单击其后面的按钮。 More info here (MDN) . 更多信息在这里(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 缺点是它还将禁用textarea和“ card button”,因此您将不得不更改HTML并将textarea和card button都移出.card
div,以便仍可单击
Give the button a positive z-index
为按钮赋予正z-index
button {
position: absolute;
z-index: 1;
}
Use z-index
in this case. 在这种情况下,请使用z-index
。
<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;
不过,z-index要求定位,例如position: absolute;
or position: relative;
或position: relative;
. 。
Read a great article about Z-Index here. 在此处阅读有关Z-Index的精彩文章。
For those who have the same issue as I do where(not restructuring your HTML):对于那些和我有同样问题的人 where (not restructing your HTML):
Apply the following codes to div 2:将以下代码应用于 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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.