HTML

Question

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

之上

让这个 "overlay" 只存在可见性是什么意思？就像没有可能的用户输入一样，因为就其目的而言，它并不是真正可以与之交互的，只是显示一些东西。

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

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

Answer 1

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

.无互动{ z 指数：-5 }

或

.互动{ z 指数：5 }

Answer 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/

HTML - 删除页面上元素的 "presence" 但保持其可见性？

HTML - Removing an element's "presence" on the page but keeping its visibility?

mouse

visibility

display

callout