当父容器设置了 overflow: auto 时，position: sticky 会失效；根本解法是将 sticky 元素移出具有 overflow 的滚动容器之外，并通过 z-index 控制层叠顺序，而非尝试在滚动上下文中“修复” sticky。
当父容器设置了 `overflow: auto` 时，`position: sticky` 会失效；根本解法是将 sticky 元素**移出具有 overflow 的滚动容器之外**，并通过 `z-index` 控制层叠顺序，而非尝试在滚动上下文中“修复” sticky。
position: sticky 的工作原理依赖于其最近的、具有滚动行为的祖先容器（即设置了 overflow-x/y 且值不为 visible 的元素）作为“粘性边界”。一旦 sticky 元素被包裹在 overflow: auto 或 scroll 的父容器内，浏览器会将其粘性锚点限制在该父容器内部——而若该父容器本身高度固定或未垂直滚动，sticky 行为就会完全失效（尤其在水平滚动场景中更易被忽略）。
在你提供的布局中，问题根源在于：.header 被嵌套在 .right 内，而 .right 显式声明了 overflow-x: auto 且 height: 50vh。这导致两个后果：
- 垂直方向：.right 高度远超 .wrapper 的 max-height: 30vh，但因 .wrapper 才是实际垂直滚动容器，.right 自身并不纵向滚动 → .header 缺失纵向粘性锚点；
- 水平方向：.right 启用了 overflow-x: auto，但 sticky 元素若在其内部，top: 0 仅相对于 .right 的内容盒生效，而 .right 无纵向滚动，故无“滚动触发粘性”的行为。
✅ 正确解法不是加 wrapper、改 clip 或 hack transform，而是重构 DOM 结构，让 sticky 元素脱离任何 overflow !== visible 的直接父级：
.wrapper {
margin-top: 30px;
display: grid;
grid-template-columns: 200px auto;
width: 100%;
max-height: 30vh;
overflow-y: auto; /* ← 垂直滚动在此发生 */
position: relative;
}
.left { background-color: chocolate; }
/* .right 不再包裹 header，仅负责横向滚动内容 */
.right {
background-color: chartreuse;
height: 50vh;
overflow-x: auto; /* ← 水平滚动在此发生 */
position: relative;
z-index: 1; /* 确保 table 内容在 header 下方 */
}
.header {
height: 20px;
width: 100%;
background-color: black;
position: sticky;
top: 0;
color: white;
z-index: 2; /* 置顶，覆盖滚动内容 */
/* 关键：.header 必须是 .wrapper 的直接子元素，或至少父级无 overflow */
}
<div class="wrapper">
<div class="left">
<div class="header"></div> <!-- 左侧 header，独立 -->
</div>
<div class="right-container"> <!-- 新增容器，不设 overflow -->
<div class="header">Blablabla blablabla blabla</div> <!-- 右侧 header，兄弟级 -->
<div class="right">
<div class="table"></div>
</div>
</div>
</div>
? 关键原则：
- Sticky 元素的最近非 visible overflow 祖先必须是它真正需要“吸附”的滚动容器（如 .wrapper）；
- 若需同时支持 X/Y 双向滚动并保持 header 粘性，sticky 元素应位于所有滚动容器的共同父级下，并通过 z-index 和 width 精确对齐；
- 避免在 sticky 元素的任意直系父元素上设置 overflow: hidden|auto|scroll（overflow: visible 是安全默认值）。
此方案完全基于 CSS，无需 JavaScript，兼容现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+），且语义清晰、可维护性强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
