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

Question

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

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

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

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

Answer 1

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

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

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>