position: sticky对无效，必须作用于/并设top和z-index；父级overflow、table滚动上下文缺失、ios safari 15.2–15.3缺陷等均会导致失效。

为什么上写position: sticky完全没反应

不是你写错了，是浏览器根本不认。<thead>默认<code>display: table-header-group，这个值被CSS规范明确排除在sticky支持范围外。哪怕DevTools里看到样式写了，Computed面板最终position也一定是static或relative。

必须把position: sticky落到<th>或<code><td>上——这是唯一能触发粘性的层级。同时别忘了：<code>top: 0不能省，z-index: 1要显式设，否则滚动时会被 内容盖住。

• <th>和<code><td>都要加<code>position: sticky; top: 0（多行表头时第二行用top: 42px类推）
• 删掉所有对<thead>或<code><table>的<code>position: sticky尝试
• 确保<th>有<code>background-color，不然滚动时文字会透出

  父容器overflow: hidden让sticky直接退化为static

  只要从<th>往上数任意一层（包括<code><div class="table-wrapper">、<code>、甚至框架自带的.ant-layout-sider），设置了overflow: hidden、overflow: auto或overflow: scroll，且该层没设position: relative等定位属性，sticky就彻底失效。

  打开DevTools → Elements → Computed面板，点开position右侧的“Show all”，逐级点击“parentElement”链接，查每一层的overflow-x和overflow-y最终计算值。临时加overflow: visible !important到可疑父级，如果表头立刻吸顶，就是它的问题。

  • 常见高危组合：overflow: hidden + padding（你以为是padding问题，其实是overflow）
  • UI框架常悄悄加overflow: hidden，比如.modal-content或.card-body
  • 修复不一定要删overflow: hidden，可用clip-path: inset(0)替代，既保持裁剪又不阻断sticky

  表格自身没有滚动上下文，sticky锚点无处可依

  <table>默认不可滚动，<code>position: sticky需要一个「内容溢出 + 明确高度限制」的祖先容器才能锚定。只给<table>设<code>max-height没用，它必须被包在一个带overflow-y: auto的<div>里，且这个<code><div>不能有<code>transform、filter或will-change（这些会创建新层叠上下文，同样禁用sticky）。

  最简可行结构：<div class="table-wrapper" style="max-height: 400px; overflow-y: auto;"><table>...</table></div>。注意：table-wrapper不能是flex或grid的直接子项并被压缩（加flex-shrink: 0更稳）。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 避免在<table>上设<code>border-collapse: separate，必须用collapse，否则Safari/Chrome中表头会“粘住但往下掉像素”
  • 列宽不固定时，加table-layout: fixed到<table>，防止sticky后列宽重排跳动 <li>别给<code><table>或<code><thead>加<code>transform（包括translateZ(0)），哪怕只是为开启GPU加速

    iOS Safari 15.2–15.3存在sticky严重bug

    这个版本的iOS Safari有已知缺陷：表头吸顶错位、卡顿、滚动后无法恢复。仅靠@supports (position: sticky)检测不出来，运行时才会暴露。

    如果你的用户群覆盖较广，尤其是企业内网或教育场景（设备更新慢），不能只依赖原生sticky。稳妥做法是降级为JavaScript监听scroll + getBoundingClientRect()动态设置top，或改用display: grid重构表格布局（语义保留，用<table>标签但重置<code>display）。

    • 不要在flex-direction: column-reverse容器里放sticky表头，基准线会反转
    • 多行表头时，第二行top值必须严格等于首行渲染高度（含border、padding），不能靠估算
    • 移动端真机调试比模拟器更可靠，Safari的响应式设计模式会掩盖部分bug