添加在其他 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
}