当父容器设置了 overflow-x: scroll（同时 overflow-y: visible），其内部的 position: absolute 元素若超出容器边界（如向上偏移），仍会被裁剪——这是 CSS 规范行为，仅靠 z-index 或 position: absolute 无法绕过溢出裁剪。
当父容器设置了 `overflow-x: scroll`（同时 `overflow-y: visible`），其内部的 `position: absolute` 元素若超出容器边界（如向上偏移），仍会被裁剪——这是 css 规范行为，仅靠 `z-index` 或 `position: absolute` 无法绕过溢出裁剪。
为什么 top: -100px 不生效？
关键原因在于：overflow-x: scroll 会创建一个新的块级格式化上下文（BFC），同时隐式触发 overflow: clip 对所有溢出方向的裁剪行为——即使显式声明 overflow-y: visible，现代浏览器（Chrome、Firefox、Safari）仍会将 overflow-x: scroll 与 overflow-y: visible 组合视为等效于 overflow: auto，从而对所有方向（包括 top）进行裁剪。因此，ul 设置 top: -100px 后虽脱离文档流，但仍被 .container 的剪裁边界截断。
✅ 正确的 CSS-only 解决方案
唯一可靠的纯 CSS 方案是 将绝对定位元素移出滚动容器的 DOM 结构层级，使其不再受其 overflow 限制：
<div class="container">
<div>
test 1
</div>
<div>
test 2
</div>
</div>
<!-- 菜单脱离 .container，挂载到同级或 body 下 -->
.container {
position: relative; /* 保持定位上下文供 JS 定位参考 */
border: 1px solid red;
height: 150px;
width: 100%;
overflow-x: scroll;
overflow-y: visible;
}
.floating-menu {
position: absolute;
top: 0;
left: 0;
background-color: #3f3;
padding: 8px;
margin: 0;
list-style: none;
z-index: 1000;
/* 初始隐藏，由 JS 控制显隐与定位 */
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
⚠️ 注意：严格意义上的“纯 CSS”无法动态响应滚动容器内元素的位置并精准悬浮（如 tooltip 式菜单）。CSS 无运行时坐标计算能力，因此 真正可维护的 CSS-only 场景，仅适用于静态脱离结构的固定位置悬浮层（例如全局通知栏、固定侧边菜单）。若需绑定到特定子项（如 test 1 右侧/上方），必须借助少量 JavaScript 计算 getBoundingClientRect() 并设置 left/top。
替代思路（无 JS，但有局限）
若坚持完全不写 JS，可改用 position: fixed + 手动偏移（需预知容器在视口中的位置）：
.floating-menu {
position: fixed;
top: 20px; /* 手动估算距顶部距离 */
left: 30px; /* 手动估算水平位置 */
}
但此方式不具备响应性，窗口缩放或滚动后极易错位，不推荐用于生产环境。
总结
- ❌ overflow-x: scroll + overflow-y: visible ≠ 纵向不裁剪；实际仍会裁剪 top/bottom 溢出内容。
- ✅ 唯一健壮的 CSS 方案：将浮动元素（如菜单）DOM 上移至滚动容器外部，再通过 position: absolute 或 fixed 定位。
- ? z-index、transform: translateZ(0)、will-change 等均无法解除 overflow 的裁剪边界。
- ? 最佳实践：结构先行——把需要溢出的内容设计为“不属于滚动区域”的独立组件，而非强行从内部突破。
