当父容器设置了 overflow-x: scroll 时，其内部 position: absolute 的子元素若超出容器可视区域（如向上偏移），仍会被裁剪——这是由 CSS 规范中“overflow 裁剪边界”决定的，仅靠 z-index 或 overflow-y: visible 无法绕过。
当父容器设置了 `overflow-x: scroll` 时，其内部 `position: absolute` 的子元素若超出容器可视区域（如向上偏移），仍会被裁剪——这是由 css 规范中“overflow 裁剪边界”决定的，仅靠 `z-index` 或 `overflow-y: visible` 无法绕过。
在 CSS 中，一个设置了非 visible 值的 overflow（包括 overflow-x 或 overflow-y）的容器，会为其内部所有后代元素（无论定位方式如何）创建一个新的“裁剪上下文”（clipping context）。这意味着：即使子元素使用 position: absolute 并设置 top: -100px，只要其祖先链中存在 overflow-x: scroll（或 auto/hidden）且该容器具有定位上下文（如 position: relative），该绝对定位元素就会被裁剪——overflow-y: visible 并不能解除 overflow-x 所触发的整体裁剪行为。
❌ 为什么你的代码不生效？
- top: -100px 试图将 <ul> 上移，但 .container 的 overflow-x: scroll（配合 position: relative）已构成裁剪容器；
- overflow-y: visible 在规范中不否定 overflow-x 引发的裁剪；它仅影响 y 方向滚动行为，而非裁剪逻辑；
- z-index 对裁剪无效——元素先被裁剪，再叠层，被裁掉的部分根本不会参与渲染。
✅ 正确的 CSS-only 解决方案：脱离裁剪上下文
核心思路是：让绝对定位元素的包含块（containing block）脱离 overflow 容器。可通过以下任一方式实现：
方案 1：将绝对定位元素移至 .container 外部（推荐）
<div class="container">
<div>
test 1
</div>
<div>
test 2
</div>
</div>
<!-- ul 独立于 container -->
<ul class="dropdown-menu" data-for="test1">
<li>menu 1</li>
<li>menu 2</li>
</ul>.dropdown-menu {
position: absolute;
top: 50px; /* 相对于视口或 body 定位 */
left: 100px; /* 需配合 JS 动态计算位置，或用 CSS 自适应定位（见下文） */
background-color: #3f3;
margin: 0;
padding: 8px;
list-style: none;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}✅ 优势：完全规避裁剪，语义清晰；配合 :focus-within 或 :hover 可纯 CSS 控制显隐（需合理嵌套结构）。
方案 2：利用 position: fixed（适用于视口内定位）
ul {
position: fixed;
top: 20px; /* 相对于视口顶部 */
left: 120px; /* 需动态计算，或结合 transform + anchor */
background-color: #3f3;
padding: 8px;
margin: 0;
list-style: none;
}⚠️ 注意：fixed 脱离文档流，不随滚动条移动，适合悬浮提示类场景；若需随容器滚动，则不可用。
方案 3：重设容器的 overflow 与定位层级（有限适用）
若必须保留在 DOM 内部，可尝试：
- 移除 .container 的 position: relative（使其不成为包含块）；
- 将 ul 的包含块上提至更外层有 position: relative 且 无 overflow 裁剪 的祖先；
- 同时确保该祖先未设置 overflow: hidden/scroll/auto。
/* 示例：外层 wrapper 不设 overflow */
.wrapper {
position: relative; /* 新的包含块 */
}
.container {
/* 移除 position: relative */
border: solid 1px red;
height: 150px;
width: 100%;
overflow-x: scroll;
overflow-y: visible;
}
ul {
position: absolute;
top: -100px; /* 现在相对于 .wrapper 定位，不再被裁剪 */
left: 0;
background-color: #3f3;
}⚠️ 关键注意事项
- overflow-x: scroll 和 overflow-y: visible 的组合不会创建“部分裁剪”——只要 overflow-x ≠ visible，整个框就成为裁剪容器；
- clip-path 或 mask 无法解除 overflow 裁剪，它们作用于不同渲染阶段；
- 纯 CSS 实现动态定位（如对齐某个 <div>）需结合 :has()（现代浏览器）或借助 anchor-positioning（CSS Anchor Positioning，实验性，暂未广泛支持）；
- 若需强交互（如点击展开菜单），建议搭配轻量 JS 计算 getBoundingClientRect() 动态设置 left/top，兼顾兼容性与精确性。
总结
解决 absolute 元素被 overflow-x 容器裁剪的根本方法，不是调整 z-index 或 overflow-y，而是重构 DOM 结构或定位上下文，使绝对定位元素脱离裁剪容器的影响范围。优先选择方案 1（DOM 提升）或方案 3（包含块上移），既符合 CSS 规范，又具备良好可维护性与兼容性。
