HTML - 删除页面上元素的“存在”但保持其可见性？答案

【问题标题】：HTML - Removing an element's "presence" on the page but keeping its visibility?HTML - 删除页面上元素的“存在”但保持其可见性？
【发布时间】：2017-11-27 15:44:20
【问题描述】：

我有一个元素覆盖了另一个元素。主要元素是一个画布，其中元素不断有鼠标交互，直接位于其上方的元素仅显示充当小标记的元素。相同的位置，相同的大小，重要的是覆盖在画布之上。

让这种“叠加层”仅在可见性方面存在意味着什么？就像没有可能的用户输入一样，因为就其目的而言，它并不是真正可以与之交互的，只是显示一些东西。

删除 CSS 中的选择会阻止您点击它，但它仍然位于其他元素之上，并且不允许鼠标事件。隐藏元素会消除其存在，但也会使其不可见。

在普通的桌面应用程序中，您只需在屏幕上绘制一些内容并根据需要添加功能，但对于 HTML，这两件事本质上是相同的。

【问题讨论】：

标签： html mouse visibility display callout

【解决方案1】：

我相信在 CSS 中添加以下代码可以解决您的问题：

.no-interaction { z 指数：-5 }

或

.交互{ z指数：5 }

【讨论】：

叠加层需要在画布的顶部，因为具有更高的 z-index。
是否可以将叠加层分成小部分并根据它们的父级将它们定位在 absolute 或 relative 中？
这仍然会阻止您选择它下面的内容，只是在特定位置。我希望叠加层在页面上不存在。
好吧，我相信这是不可行的。但是，有人可能会想出一个可能会有所帮助的答案。

【解决方案2】：

事实证明，只需将pointer-events CSS 属性设置为none，就可以在任何你想不存在的地方。

我认为它会比这更有趣，但 CSS 中有一个内置方法。

<div id="canvas"></div>
<div id="overlay"></div>

#canvas, #overlay {
  width: 500px;
  height: 500px;
  position: absolute;
}

#canvas {
  background: blue;
}

#overlay {
  background: red;
  pointer-events: none; // right here
}

$('#canvas').click(function() {
    alert('Clicked');
});

https://jsfiddle.net/ufsy33aw/

【讨论】：