sticky在Flex容器中失效是因为其依赖最近的滚动祖先，而Flex容器默认不创建滚动上下文，且transform、overflow:hidden等属性会切断sticky行为；必须用flex-direction:column+固定高度+overflow-y:auto构造滚动容器，并确保sticky元素为其直接子元素。
sticky在Flex容器里为什么失效
直接给 thead 或表头 tr 加 position: sticky，在 Flex 布局的表格（比如用 display: flex 模拟表格结构）中大概率不生效——因为 sticky 的触发依赖「最近的具有滚动机制的祖先容器」，而 Flex 容器默认不创建新的层叠上下文或滚动上下文，且 sticky 元素的祖先若设置了 transform、filter、will-change 或 overflow: hidden 等属性，也会切断 sticky 行为。
常见错误现象：top: 0 写了但一滚动就消失，或始终固定在视口顶部而非父容器顶部。
- Flex 容器本身不能是 sticky 的“滚动容器”，必须确保其父级有明确的
overflow-y: auto且高度受限 - 避免在 sticky 元素或其任意祖先上使用
transform: translateZ(0)或will-change: transform（哪怕为了 GPU 加速） - Flex 容器若设了
align-items: stretch（默认值），可能让子项高度撑满，导致内部无滚动空间——需显式限制高度并开启溢出
用 flex-direction: column + overflow 实现可滚动区域
想让表头吸顶，本质是要构造一个「内部可垂直滚动、且表头能相对于它 sticky」的 Flex 结构。推荐用 flex-direction: column 的外层容器包裹表头和内容区，并控制整体高度与溢出行为。
关键点：sticky 元素必须是该滚动容器的**直接子元素**，且滚动容器必须有明确高度和 overflow-y: auto。
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
display: flex;
flex-direction: column;
height: 400px; /* 必须设具体高度 */
overflow-y: auto;
}
<p>.table-header {
flex: none; /<em> 防止被拉伸 </em>/
position: sticky;
top: 0;
background: white;
z-index: 10;
}</p><p>.table-body {
flex: 1; /<em> 剩余空间给内容 </em>/
min-height: 0; /<em> 防止 flex item 不收缩 </em>/
}-
flex: none比flex-shrink: 0更稳妥，避免表头被压缩 -
min-height: 0在.table-body上很重要——否则当内容少时，flex item 可能拒绝收缩，导致滚动条不出现 - 不要给
.table-header设height: 100%或flex: 1，会破坏 sticky 定位基准
兼容性与移动端注意事项
iOS Safari 对 sticky 的支持较晚（iOS 14.5+ 才稳定），且在 Flex 容器中表现更敏感。Android Chrome 大部分正常，但旧版 WebView 仍可能忽略 position: sticky。
- 必须加
-webkit-sticky前缀（虽然现代浏览器已不需要，但部分 iOS WebView 仍依赖）：position: -webkit-sticky; - 避免在 sticky 元素上使用
backface-visibility: hidden——它和transform一样会禁用 sticky - 移动端手指快速滚动时，sticky 表头可能出现“跳帧”感；可加
will-change: top仅对表头启用，但切勿加在滚动容器上 - 如果用
display: grid替代 Flex，sticky 表头兼容性反而更好——Flex + sticky 组合仍是当前最易出问题的场景之一
替代方案：不用 sticky 也能模拟吸顶效果
当 sticky 行为不可靠（比如嵌套在复杂布局、或需要支持 iOS 13），可以改用 JavaScript 监听滚动 + 动态切换 position: fixed，但要注意脱离文档流后留出占位空间。
核心逻辑：监听 .table-wrapper 的 scroll 事件，判断表头是否即将滚出视口，然后给表头加类名，同时用 padding-top 或伪元素占位。
.table-header.is-fixed {
position: fixed;
top: 0;
width: 100%; /* 注意宽度需手动控制 */
transform: translateX(-offsetLeft); /* 若容器有横向滚动，需补偿 */
}- 用
getBoundingClientRect().top判断是否 - fixed 后必须手动设置
width，否则会收缩到内容宽度；建议用getComputedStyle读取原始宽度再赋值 - 滚动过程中频繁操作 DOM 性能差，务必用
requestAnimationFrame节流
Flex + sticky 看似简单，实际要同时满足容器约束、样式隔离、跨端渲染三个条件，最容易被忽略的是「sticky 是否有合格的滚动上下文」——不是写了 top: 0 就万事大吉，得一层层检查祖先的 overflow、transform 和 contain 属性。
