javascript - 容器外的可选元素溢出 : hidden

Question

第一篇文章...

所以问题在于两个子元素在其父容器之外是可选的。

我有一个带有“溢出:隐藏”的容器 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 阈值。

还有更多的事情要做，但这绝对是问题的核心。我的代码实际上有与文本区域的磨砂覆盖相同的问题。在这种情况下，选择 container1 的未覆盖文本区域实际上选择了 container2 内的文本。同样的问题，但这就是我需要解决这个问题的原因。

我的实际代码中的语法很好，除此之外一切都很完美。

如果需要，我可以发布更多代码，但问题确实归结为这些概念元素，我完全不知道这里发生了什么。希望有人能阐明情况，这样我就不会永远卡在这个细节上。

我唯一能想到的是嵌套的 z-index 弄乱了东西，但这仍然不能解释为什么 container2 中的图像可以在其溢出边界之外访问。

感谢您对我的“堆栈溢出”问题的任何帮助

*编辑代码以反射(reflect)它的使用方式

Answer 1

这是因为属性“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" 相同