设置overflow-y:scroll的父元素下绝对定位孙元素无法溢出重叠问题

问题根因 #

你遇到的是CSS溢出属性的默认约束规则导致的问题：当一个元素同时设置overflow-x和overflow-y两个属性时，只要其中任意一个属性的值不是visible，另一个原本设为visible的属性会被自动重置为auto。你给父元素设置了overflow-x: hidden+overflow-y: scroll，相当于父元素两个方向都会对溢出内容做裁剪，内部的绝对定位元素哪怕脱离常规文档流，也无法突破父元素的裁剪边界。

可行解决方案 #

方案1：调整DOM结构（最推荐，无兼容问题） #

把需要溢出显示的绝对定位孙元素，移动到和overflow-y: scroll父元素同级的DOM节点下，放到没有溢出裁剪的公共父容器内。如果需要保持和原容器内锚点元素的相对位置，可以通过JS监听滚动父元素的滚动事件，动态计算并更新绝对定位元素的偏移值。

方案2：修改定位基准节点 #

如果无法调整DOM结构，你需要把孙元素的定位基准从滚动父容器内部的节点转移到外部：

• 移除孙元素的直接父节点（滚动父容器的子节点）上的position: relative属性
• 给滚动父容器的上层、没有设置任何overflow裁剪的祖先节点添加position: relative属性
  这样孙元素的绝对定位基准就脱离了有溢出裁剪的滚动父容器，自然可以突破裁剪边界显示。

方案3：改用fixed定位（适合弹出类组件） #

如果你的孙元素是下拉选择框、悬浮提示、右键菜单这类组件，可以直接把孙元素的定位改成position: fixed，通过Element.getBoundingClientRect()方法计算原锚点元素在视口中的坐标，动态给fixed定位的元素设置top、left偏移值。fixed定位完全基于视口，不受任何父元素的overflow属性影响。

内容的提问来源于stack exchange，提问作者Shotiko Topchishvili