Div重叠选择会阻止它与打开

Question

我最近遇到了一个问题，一个看不见的div重叠select元素。单击重叠部分会阻止选择列表打开，因此您可以选择一个选项。我试图理解这种行为。这是跨浏览器，所以我猜它是有意的。 Fiddle demo。

div是绝对定位的，而select是静态的。 z-index不适用于静态元素，但是绝对元素位于“静态”之上？

这不是Javascript问题，因为这不是click事件。这是一个“处理选择元素被浏览的浏览器”问题。

有没有办法解决这个问题，所以点击div会将点击向下传递给select元素？

Answer 1

您可以使用pointer-events属性。来自MDN：

指针事件CSS属性指定在什么情况下（如果有的话）特定图形元素可以成为鼠标事件的目标。

Full Information from MDN

Browser support from CanIUse - 请注意IE11下方没有支持

* {
  font-size: 24px;
}

#div1,
#div2 {
  pointer-events: none;
}

<div id="div2" style="position: absolute; border: 1px dashed blue; width: 50px; top:0; left: 60px;">
  <span id="span2">&nbsp;</span>
</div>

<select name="foo" id="select1">
    <option value="1">This is my option</option>
</select>

<div id="div1" style="position: absolute; border: 1px dashed red; width: 50px; top:0; left: 10px;">
  <span id="span1">&nbsp;</span>
</div>