与div背后的元素交互

Question

我有2个div（div1，div2）。 div1在前面，div2在后面。我想使用div1制作一个用于改变颜色模式的掩码（改变所有站点的颜色温度）。所以div1需要站在最高位置（z-index = 999999）。但是，在这种情况下，我无法与div1后面的其他元素进行交互。我该怎么办？

#div1{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color:rgba(255, 255, 0, 0.2);
  z-index:99999;
}
#div2{}

<div id="div1"></div>
<div id="div2">
<input type='button' value="click me">
</div>

Answer 1

您可以使用pointer-events:none

https://caniuse.com/#search=pointer-events

＆＃13;

＆＃13;

#div1{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color:rgba(255, 255, 0, 0.2);
  z-index:99999;
  pointer-events: none;
}
#div2{}

＆＃13;

<div id="div1"></div>
<div id="div2">
<input type='button' value="click me">
</div>

＆＃13;

＆＃13;

＆＃13;