具有负z-index值的元素上的点击事件

Question

我有一个带部分透明背景的父元素。在这个元素内部有一个子元素。我需要将子元素显示在父元素的背景中，所以我将子元素的z-index设置为-1。

这是一个CodePen示例：https://codepen.io/anon/pen/xpVbPa 灰色正方形是子元素。我需要处理对它的点击事件。怎么做？我尝试在父元素上设置pointer events:none，但它没有起作用。

- Ildar

---

你为什么想要这样做？ - Sagar Kodte

你的问题相当令人困惑。 - Mr. Alien

Answer 1

使用伪元素并添加背景，然后在其上添加“pointer-events: none”。 Codepen

function childClick() {
  alert('click!');
}

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 50px;
  position: relative;
}

.parent:after {
  content: '';
  background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.child {
  width: 150px;
  height: 150px;
  background-color: gray;
  cursor: pointer;
  position: absolute;
}

<div class="parent">
  <div class="child" onclick="childClick()"></div>
</div>

- Chris Happy

---

根据developer.mozilla.org的说明，它支持Safari 3及以上版本。 - Chris Happy

@RamzanChasygov，我认为可能会有些混淆。请看这里：https://caniuse.com/#search=pointer-events - Chris Happy

Answer 2

解决这类问题的原则不在于了解.parent的父元素，而在于理解兄弟元素。

function childClick() {
  alert('click!');
}

.parent {
  position:relative;
}
.frontground {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 50px;
  pointer-events: none;
  position: relative;
  background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png)
}
.child {
  width: 150px;
  height: 150px;
  background-color: gray;
  cursor: pointer;
  position: absolute;
  margin: 50px;
}

<div class="parent">
  <div class="child" onclick="childClick()"></div>
  <div class="frontground"></div>
</div>

在您的情况下，兄弟元素实际上可以是伪元素，但这可能并非总是可行。

- tao

Answer 3

更新你的 CSS。将背景设置为子 div :after

.child:after{
  width: 150px;
  height: 150px;
  background-color: gray;
  position: absolute;
  cursor: pointer;
  content:"";
  z-index: -1;
}
.child {
  width: 150px;
  height: 150px;
}

- Ajeesh KH