css - 阻止用户在 iframe 中选择文本

Question

我试图阻止用户从 iframe 中显示的 pdf 文件中选择文本。为此，我查看了 css 属性 position: relative 和 position: absolute。这样，我就可以将我的 iframe 与 div 重叠，从而防止用户从我的 iframe 中选择文本(因为他将单击重叠的 div)。这是我到目前为止所做的:

<div id="container" style="width:100%; min-width: 330px; height: 545px; margin: 0 auto; position: relative;"> 
    <div id="divOverlapIframe" style="height:100%; width:100%; overflow-x: hidden; overflow-y: hidden; border: none; position: absolute; top: 0; left: 0;" scrolling="auto" marginheight="0" frameborder="0"></div>
    <iframe id="iframe" src="MY_PDF_SOURCE" style="height:100%; width:100%; border: none; position: absolute; top: 0; left: 0;"></iframe>
</div>

我可以看到我的 div 确实与我的 iframe 重叠，但这并没有阻止用户选择文本。我在这里缺少什么？

Answer 1

如果这就是您正在使用的所有 CSS，您可能需要在“overlay”div 上添加一个 z-index。

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}