将元素放在前面以使其可单击

Question

我有一个非常复杂的问题，解释起来并不容易，但我要说的是：

我正在制作一个视差效果，我有几张图像，层叠在一起。在其中一些层中，我希望有可单击的按钮(我在层上应用的变换也必须应用到按钮上)。

这就是视差在DOM方面的样子：

<div class="parallax">
  <div class="parallax-layer" data-depth="0.9" data-layer="2">
    <div class="button" data-chapter="1">
      The Button
    </div>
  </div>
  <div class="parallax-layer" data-depth="1.0" data-layer="1">
  </div>
</div>

我使用的视差插件使用3d变换，但只通过x/y轴移动图层。这样做的问题是，根据层的高度，按钮可能会被他上面的层覆盖，即使它是可见的，也不可能单击它(背景是透明的PNG)。

目前，我实现的解决方案包括在"button“div上添加一个转换，并使用z轴将其向前移动。此解决方案适用于Chrome和Firefox，但不会更改Safari或Internet Explorer 8/9/10上的任何内容。

我在找另一种选择。对于容易实现的东西有什么建议吗？

Answer 1

您可以禁用没有按钮的部分层的事件-使用CSS pointer-events: none;