css - 溢出 :hidden in a position:fixed div

Question

我在不同的 z 层上有两个 div。左侧的 sidebar div(红色)和右侧的 main div。两者都嵌入了 2 个 div。

(红色背景色)sidebar div 按预期停在页面的 50% 处。但是，我未能 overflow hidden [SHOULD NOT BE SEEN。但是是可见的。] 这个 div。因此它覆盖了 main div 的第二个内部 div [BLOCK RIGHT]。

这是困境，在右侧的白色背景中看到。

http://jsfiddle.net/brazim/v6rk1b4q/39/

此布局的动机:使用 Javascript，用户将能够显示 sidebar 的完整内容或 main 内容将 sidebar div 的右侧边缘向左或向右拖动。

我可以处理 javascript，只是缺少正确的溢出。

感谢 JsFiddle 中的任何提示。

Answer 1

具有position: fixed 的元素与其父容器无关，而是与视口(viewport)相关，因此它不受overflow 设置的影响。你应该为此使用绝对定位，或者，如果你需要修复它(考虑到，在侧边栏的情况下，它已经被其父修复)使用替代解决方案，如 display: none

引用:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning