当父容器设置了 overflow-x: scroll 时，其内部的 position: absolute 元素若超出容器边界（如向上偏移），会被强制裁剪而不可见；CSS 标准规定 overflow 会创建新的层叠上下文和裁剪边界，即使 z-index 或 overflow-y: visible 也无法绕过该限制。
当父容器设置了 `overflow-x: scroll` 时，其内部的 `position: absolute` 元素若超出容器边界（如向上偏移），会被强制裁剪而不可见；css 标准规定 `overflow` 会创建新的层叠上下文和**裁剪边界**，即使 `z-index` 或 `overflow-y: visible` 也无法绕过该限制。
为什么 top: -100px 不生效？
关键原因在于：只要一个元素的 overflow 值不为 visible（如 scroll、auto、hidden），它就会成为其子元素绝对定位的「包含块裁剪边界」。即使你设置 overflow-y: visible，只要 overflow-x 是 scroll，整个 overflow 属性的计算值就不再是 visible，浏览器便会启用裁剪行为——此时 ul 的 top: -100px 会直接被 .container 的上边界截断，无论 z-index 多高都不可见。
✅ 正确理解：overflow-x 和 overflow-y 是同一属性的两个方向，但 overflow 作为一个整体决定是否创建 clipping boundary。规范明确指出：“If the value of overflow is not visible, the element establishes a new stacking context and a clipping boundary.”
CSS-only 解决方案（无需 JS）
唯一可靠的纯 CSS 方案是将绝对定位元素移出受 overflow 约束的容器层级，使其脱离裁剪上下文：
<div class="container">
<div>
test 1
</div>
<div>
test 2
</div>
</div>
<!-- 将 ul 移至 container 外部，与 container 同级 -->
<ul class="floating-menu">
<li>menu 1</li>
<li>menu 2</li>
</ul>.container {
position: relative; /* 保持相对定位，便于后续定位参考 */
border: solid 1px red;
height: 150px;
width: 100%;
overflow-x: scroll;
overflow-y: visible;
}
.container > div {
position: relative;
width: 150px;
height: 100%;
display: inline-block;
border: 1px solid black;
}
.floating-menu {
position: absolute;
top: 20px; /* 相对于 .container 的 top 偏移 */
left: 20px; /* 可配合 JS 动态计算，但纯 CSS 下需预设位置 */
background-color: #3f3;
padding: 8px;
margin: 0;
list-style: none;
z-index: 10;
}⚠️ 注意事项：
- 若菜单需精确对齐某个 div（如“test 1”下方），纯 CSS 无法动态绑定位置——position: absolute 的参考点是最近的 position: relative/absolute/fixed 祖先，而 .container 是它的父级，但 ul 已移出 DOM 流，需手动计算 left 值（例如 left: 20px 对应第一个 div 的水平位置）。
- overflow-y: visible 在 overflow-x: scroll 下无效，不要依赖它“放行”垂直溢出。
- 避免在 .container 内使用 transform、will-change 或 filter，这些也会意外触发新的层叠上下文或裁剪行为。
替代思路：用 clip-path 或 mask？不推荐
虽然 clip-path: none 或 mask 理论上可覆盖裁剪，但它们无法解除 overflow 创建的裁剪边界本身，且兼容性差（尤其 Safari 对 clip-path on scroll containers 支持不稳定），不属于可靠方案。
✅ 总结：没有“魔法 CSS 属性”能绕过 overflow 的裁剪规则。真正的 CSS-only 解法只有结构层面的调整——将需要溢出的元素提升到 overflow 容器之外，并通过 position: absolute + 显式坐标进行定位。若需动态对齐，建议结合少量 JavaScript 计算位置，以兼顾灵活性与健壮性。
