当父容器设置 overflow: auto 时，position: sticky 会失效；本文提供纯 CSS 解决方案——通过结构重构（将 sticky 元素移出滚动容器）并配合 z-index 层级控制，实现表头横向滚动中保持固定定位。
当父容器设置 `overflow: auto` 时，`position: sticky` 会失效；本文提供纯 css 解决方案——通过结构重构（将 sticky 元素移出滚动容器）并配合 `z-index` 层级控制，实现表头横向滚动中保持固定定位。
position: sticky 的核心限制在于：它仅在最近的、具有滚动机制（即 overflow ≠ visible）且非 transform/filter 等创建新层叠上下文的祖先容器内生效；一旦 sticky 元素自身或其直接父元素被包裹在 overflow: auto/scroll 容器中，浏览器将终止其粘性行为。这正是你遇到问题的根本原因——.header 被嵌套在设置了 overflow-x: auto 的 .right 内部，导致 sticky 失效。
✅ 正确解法不是“绕过”限制，而是规避限制源头：将 sticky 元素提升至滚动容器之外，使其绑定到更高层级、具备垂直滚动能力（overflow-y: auto）但不干扰水平滚动逻辑的祖先上。
以下是优化后的 HTML 结构与关键 CSS：
<div class="wrapper">
<div class="left">
<div class="header"></div>
</div>
<div class="right-container"> <!-- 新增非滚动容器 -->
<div class="header">Blablabla blablabla blabla</div>
<div class="right-scrollable"> <!-- 仅负责横向滚动 -->
<div class="table"></div>
</div>
</div>
</div>对应 CSS（精简关键部分）：
立即学习“前端免费学习笔记（深入）”；
.wrapper {
margin-top: 30px;
display: grid;
grid-template-columns: 200px auto;
width: 100%;
max-height: 30vh;
overflow-y: auto; /* 垂直滚动由 wrapper 承担 */
position: relative;
}
.left { background-color: chocolate; }
.right-container { position: relative; } /* 纯布局容器，无 overflow */
/* sticky header 独立于横向滚动区域 */
.header {
height: 20px;
width: 100%;
background-color: black;
color: white;
position: sticky;
top: 0;
z-index: 10; /* 确保压住下方内容 */
/* 注意：此处 width: 100% 指的是 .right-container 的宽度，非 .table */
}
/* 横向滚动仅作用于数据区 */
.right-scrollable {
background-color: chartreuse;
overflow-x: auto;
padding-top: 20px; /* 为 sticky header 预留空间，避免遮挡 */
}
.table {
width: 2000px; /* 超宽表格触发横向滚动 */
min-height: 50vh;
}⚠️ 关键注意事项：
- 结构决定行为：.header 必须是 .right-container 的直接子元素，而非 .right-scrollable 的后代；
- z-index 不可省略：sticky 元素需显式设置 z-index > 0，否则可能被后续内容覆盖；
- padding-top 补偿：因 header 占据顶部空间，.right-scrollable 应添加 padding-top，确保首行内容不被 header 遮挡；
- 避免意外层叠上下文：.right-container 不应设置 transform、opacity
该方案完全基于标准 CSS，无需 JavaScript，兼容现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+），同时兼顾语义清晰性与维护性。如需支持更复杂场景（如多级 sticky 表头），可在此结构基础上扩展 position: sticky 的 top 值与嵌套层级。
