sticky表头在弹窗中失效，主因是.scroll-container未形成有效滚动上下文；需设明确高度、避免干扰样式，并将sticky应用于th/td而非thead，同时排查层叠上下文与iOS兼容问题。
sticky 表头在弹窗里不生效？先检查 scroll-container 是否真正“可滚动”
弹窗中 sticky 表头失效，90% 是因为 .scroll-container 没触发滚动上下文——它看起来有 overflow-y: auto，但实际没产生滚动能力。浏览器只对「内容溢出 + 有明确高度限制」的容器认可 sticky 锚点。
常见错误现象：th 写了 position: sticky; top: 0;，但一滚动表头就消失或卡半截；或者整个表格直接撑开弹窗、根本没滚动条。
-
.scroll-container必须设max-height或height（不能只靠min-height或 flex 自适应） - 避免用
overflow: hidden或overflow: clip，它们会直接禁用 sticky - 如果弹窗用
display: flex布局，确保.scroll-container没被flex-shrink: 1压缩塌陷（加flex-shrink: 0更稳） - 不要把
scroll-container直接套在<table> 外还加 <code>border-collapse: collapse——边框合并会干扰 sticky 元素的渲染边界为什么 上写 sticky 没用，必须改到
<thead> 默认是 <code>display: table-header-group，这个 display 值在多数浏览器（尤其是 Safari）中不支持position: sticky。不是语法错，是规范限制。正确做法是把 sticky 应用到单元格级，同时补全必要样式防止错位：
立即学习“前端免费学习笔记（深入）”；
-
th和td都要设position: sticky; top: 0;（否则 tbody 行滚动时会盖住 thead） - 必须加
z-index: 1（sticky 元素默认不创建新层叠上下文，但表头需压住下方内容） - 给
th设background-color（不然滚动时文字会被 tbody 内容透出） - 若列宽不固定，建议加
table-layout: fixed到<table>，避免 sticky 后列宽重排 <h3>弹窗内 sticky 表头被遮挡或错位？查祖先节点的层叠上下文</h3> <p>sticky 不是全局悬浮，它会被祖先元素的层叠上下文“截断”。弹窗组件常带 <code>transform（比如 fade-in 动画）、filter或will-change，这些都会让 sticky 参考容器变成该祖先，而非你预期的.scroll-container。典型表现：表头固定位置偏高/偏低，或滚动一段后突然跳回文档流。
- 检查弹窗根元素（如
.modal或.dialog）是否含transform、filter、perspective - 如果用了动画库（如 Framer Motion、Animate.css），确认其是否悄悄加了
will-change: transform - 临时移除这些属性测试；若必须保留，就把
.scroll-container提升为该祖先的**直接子元素**，并确保它自己没被新层叠上下文包裹 - iOS Safari 尤其敏感——哪怕父容器只加了
transform: translateZ(0)，也会中断 sticky
移动端弹窗中 sticky 表头闪动或失效？别信 body 滚动
很多弹窗用
body { overflow: hidden }来禁用背景滚动，但这会让 iOS Safari（尤其 15.4 之前）无法识别 sticky 的滚动上下文。它会退回到视口定位，而视口在弹窗打开时可能已发生缩放或滚动偏移。可靠解法是彻底隔离滚动容器：
- 弹窗结构必须是独立滚动体：
<div class="modal"><div class="scroll-container"><table>...</table></div></div> -
.scroll-container设height: 100%; overflow-y: auto;，且父级.modal不能是display: flex且未设align-items（iOS 会忽略） - 删掉所有对
body的overflow操作，改用position: fixed+inert属性禁用背景交互 - 兼容旧 WebView（如微信）时，用 JS 监听
.scroll-container的scroll事件 +getBoundingClientRect().top手动切fixed类，比依赖 sticky 更可控
最易被忽略的一点：sticky 表头的
top值，永远是相对于它最近的可滚动祖先顶部计算的——不是弹窗顶部，不是视口顶部，也不是 body 顶部。这个“最近可滚动祖先”，必须是你亲手构造出来的那个.scroll-container，不能指望浏览器自动猜。 - 检查弹窗根元素（如
-
