Question

第一篇文章......

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

我有一个带有“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模糊。这看起来我也想要它，没有让它完全工作的问题。我可以调整容器2的高度，它会显示适当数量的模糊图像，使其看起来像磨砂玻璃覆盖层，也没有任何问题。

但是当我想访问容器1的较低“未覆盖”50px上的内容时，我无法通过该应该是不可访问的模糊img的不可见部分。它实际上选择并拖拽图片“frostedIMGcopy”的“隐藏”部分超出容器2的50px阈值。

还有更多事情发生，但这绝对是问题的核心。我的代码实际上与textarea的frosted叠加有相同的问题。在这种情况下，选择container1的未覆盖的textarea实际上选择了container2中的文本。同样的问题，但这就是为什么我需要解决这个问题。

我的实际代码中的语法很好，否则一切都很完美。

如果需要，我可以发布更多代码，但问题确实归结为这些概念元素，而我完全迷失了这里发生的事情。希望有人可以对这种情况有所了解，所以我不会永远不知道这个细节。

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

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

*编辑了代码以反映它的使用方式

Answer 1

这是因为属性＆＃34; position：fixed＆＃34;，在这种情况下，元素是相对于浏览器窗口/视口，而不是父元素，

替换这个：

<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 =＆＃34; selectableMenuElement＆＃34;

具有溢出的容器外部的可选元素：隐藏

1 个答案: