添加在其他 DIV 后面的 DIV 中点击按钮的能力

Question

我有一个位于 div 上的按钮，位于另一个 div 后面。 第二个 div 通过使用 css 与第一个 div 重叠：

position: absolute;

因此该按钮不可点击。 有什么办法可以让它像普通按钮一样可点击吗？

示例： 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;
}

Answer 1

您可以使用pointer-events:none; 在.card 。 这将禁用.card div上的click事件，用户可以单击其后面的按钮。 更多信息在这里（MDN） 。

缺点是它还将禁用textarea和“ card button”，因此您将不得不更改HTML并将textarea和card button都移出.card div，以便仍可单击

演示

Answer 2

为按钮赋予正z-index

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

Answer 3

在这种情况下，请使用z-index 。

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

演示

这将元素在深度字段中的位置设置为高于其他所有元素。 数字越高，堆栈顺序越高。

z-index: 1;

不过，z-index要求定位，例如position: absolute; 或position: relative; 。

在此处阅读有关Z-Index的精彩文章。

Answer 4

对于那些和我有同样问题的人 where (not restructing your HTML)：

1. div 1 在 div 2 之上
2. div 1 和 2 都需要可点击/交互
3. 但是 div 2 应该在 div 1 之前

将以下代码应用于 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
}