html - 当父级不透明时，允许在嵌套元素内没有指针事件

Question

如果我这样做 the following , 然后内部 div 是可滚动的，但选择可以在后面更改。

<div style="
position: fixed;top: 0;left:0;
width: 100px;height: 100px; background-color:rgba(11, 11, 11, 0.6); overflow: scroll;">
  <div style="background-color:rgba(127,255,64,0.6);  width: 200px;height: 200px;pointer-events: none;"></div>
</div>
<select name="" id="select">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

如果我执行以下操作，则内​​部 div 不可滚动但可以更改选择。

<div style="
position: fixed;top: 0;left:0;
width: 100px;height: 100px; background-color:rgba(11, 11, 11, 0.6); overflow: scroll;pointer-events: none;">
  <div style="background-color:rgba(127,255,64,0.6);  width: 200px;height: 200px;"></div>
</div>
<select name="" id="select">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

如何在不将 div 移到父 div 之外的情况下使 select 可选择和区域可滚动。

编辑我无法修改选择(它将是一个现有网页)并且叠加层(它是一种分析工具)必须在最上面。

Answer 1

如果你给它 position:absolute 那么你可以。

http://jsfiddle.net/Fy8vD/3472/