第一篇文章...
因此，问题在于两个子元素可以在其父容器之外选择。
我有一个带有“ overflow：hidden”的容器DIV。在此容器内是一个固定的图像元素，我正在使用它来创建磨砂玻璃覆盖层。所以像这样：
<div id="container1" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:1;">
content, which is either the unblurred image, or a textarea, depending
</div>
<div id="container2" style="position:fixed; top:0px; left:0px; width:100px; height: 50px; z-index:3; overflow: hidden">
<img id="frostedIMGcopy" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
<div id="selectableMenuElement">Menu Option</div>
</div>
其中“ container2”的背景不透明：0.5，且img模糊。这看起来也是我想要的，完全没有问题。我可以调整container2的高度，它会显示适当数量的模糊图像，使其看起来像毛玻璃覆盖层，那里也没有问题。
但是，当我想访问container1下部“未发现”的50px上的内容时，我无法越过应该无法访问的模糊img的不可见部分。它从字面上选择并将图片“ frostedIMGcopy”的“隐藏”部分拖到container2的50px阈值之上。
还有更多事情要做，但这绝对是问题的核心。我的代码实际上存在与textarea的磨砂覆盖层相同的问题。在这种情况下，选择container1的未覆盖文本区域实际上就是选择container2内的文本。同样的问题，但这就是为什么我需要对此进行解决。
我实际代码中的语法很好，否则，一切都可以正常运行。
如果需要的话，我可以发布更多代码，但是问题确实归结为这些概念性元素，对于这里发生的事情我完全迷失了。希望有人能对情况有所了解，所以我不会永远挂在这个细节上。
我唯一能想到的是嵌套的z-index弄乱了东西，但这仍然无法解释为什么container2中的图像可以在其溢出范围之外访问。
感谢您对我的“堆栈溢出”问题的帮助
*编辑代码以反映其使用方式
最佳答案
这是因为属性“ position：fixed”，在这种情况下，该元素是相对于浏览器的Window / viewport而言，而不是相对于父元素，
替换为：
<img id="frostedIMGcopy" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
有了这个：
<img id="frostedIMGcopy" style="position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
对于id =“ selectableMenuElement”也是一样
关于javascript - 容器外的可选元素有溢出:隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31821775/