javascript - 将容器 DIV 叠加在其自己的子项上

Question

我实现了一个有点复杂的 JavaScript ScrollView ，所有内容都包含在一个 DIV 中。里面的元素有 mouseover 和 mouseout 的处理程序来控制滚动行为，里面还有可以点击的链接。

现在，我需要一个大部分(或完全，无关紧要)覆盖 ScrollView 的大部分透明图像，以叠加在滚动 div 中发生的所有内容上，同时仍保持事件处理。我认为最简单的方法是，如果我能以某种方式将整个 DIV 包装在另一个 DIV 中，该 DIV 的背景图像是要叠加的图像，以便叠加图像上发生的事件可以传递给子元素并捕获。我似乎无法找到一种方法来使容器 DIV 的背景在其内容上呈现——我知道这完全违反直觉和反 DOM，但我真的只是想避免更改我现有的 JS 代码以适应这个额外的图像，无论解决方案多么骇人听闻。它看起来像这样:

<div id="superimposed" style="background-image: url('superimposed.png')">
    <div id="scrolling-view"> ... </div>
</div>

我用 z-index 尝试了各种实验都无济于事。这可能吗？如果没有，您还有其他建议吗？

Answer 1

参见 HTML "overlay" which allows clicks to fall through to elements behind it