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 直接套在 外还加 border-collapse: collapse——边框合并会干扰 sticky 元素的渲染边界

  为什么

  上写 sticky 没用，必须改到 默认是 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 到
  ，避免 sticky 后列宽重排

  弹窗内 sticky 表头被遮挡或错位？查祖先节点的层叠上下文

  sticky 不是全局悬浮，它会被祖先元素的层叠上下文“截断”。弹窗组件常带 transform（比如 fade-in 动画）、filter 或 will-change，这些都会让 sticky 参考容器变成该祖先，而非你预期的 .scroll-container。

  典型表现：表头固定位置偏高/偏低，或滚动一段后突然跳回文档流。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  • 检查弹窗根元素（如 .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 的滚动上下文。它会退回到视口定位，而视口在弹窗打开时可能已发生缩放或滚动偏移。

  可靠解法是彻底隔离滚动容器：

  • 弹窗结构必须是独立滚动体：
  ...