position: sticky 在编辑器中不工作是因浏览器限制与容器条件缺失；chrome 99+ 仅支持 ，firefox 完全不支持表格元素，且父容器需满足 max-height、overflow-y: auto 等硬性条件。

为什么 + position: sticky 在编辑器里基本不工作

不是你 CSS 写错了，是浏览器压根不认。Chrome 99+ 仅对 <th> 有限支持，<code><thead> 和 <code><tr> 全被忽略；Firefox 至今（2026 年）完全不支持表格元素的 sticky 行为。根本原因是 <code><table> 的 <code>display: table 渲染模型不提供 sticky 所需的定位上下文，编辑器预览区（比如 CodePen 的 #preview）又常缺高度和溢出控制，直接切断触发链。

编辑器中 sticky 吸顶必须满足的三个硬条件

哪怕结构改用 div 模拟，以下三点任一缺失，position: sticky 就静默退化为 static：

• sticky 元素的**直接父容器**必须同时设 max-height（如 400px）和 overflow-y: auto——只写 overflow: auto 不行，也不能靠 body 滚动
• 该父容器不能有 overflow: hidden、transform、will-change 或 filter，这些会创建新层叠上下文，截断 sticky 锚定链
• 编辑器沙箱环境（如某些 iframe 预览）可能禁用 sticky，此时 computed styles 中 position 显示为 static，非 CSS 问题

用 div 模拟表格实现稳定吸顶的最小可行结构

放弃原生 <table>，这是唯一能在所有编辑器（CodePen/JSFiddle/StackBlitz/VS Code Live Server）中可靠运行的路径： <ul><li>表头抽离为独立 <code><div class="thead-sticky">，不能嵌在滚动容器内部 <li> <code>.thead-sticky 必须含四要素：position: sticky、top: 0、z-index: 10、background: white

表体用另一个 <div class="tbody-scroll">，设 <code>max-height: 400px 和 overflow-y: auto，且与 .thead-sticky 是**同级兄弟元素**

列宽必须硬编码（如 style="width: 150px"），table-layout: fixed 在 div 布局中无效

导航栏类吸顶在编辑器里的关键补丁

编辑器预览区常默认无高度限制，导致页面无法垂直滚动，position: sticky 失去触发前提：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 必须确保 sticky 元素下方有足够长的内容（比如多段 <p></p> 或占位 <div style="height: 200vh"></div>）
• 加 position: -webkit-sticky 双声明，兼容 Safari 15.4+（编辑器中 Safari 用户仍不少）
• 避免给 body 或外层容器设 overflow: hidden —— 它常被模态框、抽屉组件遗留样式污染，DevTools 中查 computed position 若为 static，优先检查这个

真正卡住人的从来不是怎么写 top: 0，而是编辑器预览区那个看不见摸不着的父容器有没有悄悄加了 transform，或者它的上层有没有一个 overflow: hidden 把整个锚定链掐断了。