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事件，用户可以单击它后面的按钮。 More info here (MDN)。

缺点是它还会禁用textarea和“卡片按钮”，因此您必须更改HTML并将textarea和卡片按钮移出.card div，这样它们仍然可以点击

<强> DEMO

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>

DEMO

这会使深度字段中的元素高于其他所有元素。数字越大，堆栈顺序越高。

z-index: 1;

但是，z-index需要定位，例如position: absolute;或position: relative;。

Read a great article about Z-Index here.

添加“能力”以单击DIV中位于其他DIV后面的按钮

3 个答案: