position: sticky 在编辑器中不工作是因浏览器限制与容器条件缺失；Chrome 99+ 仅支持 <th>，Firefox 完全不支持表格元素，且父容器需满足 max-height、overflow-y: auto 等硬性条件。
为什么 + position: sticky 在编辑器里基本不工作
不是你 CSS 写错了，是浏览器压根不认。Chrome 99+ 仅对 <th> 有限支持，<thead> 和 <tr> 全被忽略；Firefox 至今（2026 年）完全不支持表格元素的 sticky 行为。根本原因是 <table> 的 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）中可靠运行的路径：
- 表头抽离为独立
<div class="thead-sticky">，不能嵌在滚动容器内部
-
.thead-sticky 必须含四要素：position: sticky、top: 0、z-index: 10、background: white
- 表体用另一个
<div class="tbody-scroll">，设 max-height: 400px 和 overflow-y: auto，且与 .thead-sticky 是**同级兄弟元素**
- 列宽必须硬编码（如
style="width: 150px"），table-layout: fixed 在 div 布局中无效
导航栏类吸顶在编辑器里的关键补丁
编辑器预览区常默认无高度限制，导致页面无法垂直滚动，position: sticky 失去触发前提：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
sticky 元素下方有足够长的内容（比如多段 <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 把整个锚定链掐断了。
<th> 有限支持，<thead> 和 <tr> 全被忽略；Firefox 至今（2026 年）完全不支持表格元素的 sticky 行为。根本原因是 <table> 的 display: table 渲染模型不提供 sticky 所需的定位上下文，编辑器预览区（比如 CodePen 的 #preview）又常缺高度和溢出控制，直接切断触发链。div 模拟，以下三点任一缺失，position: sticky 就静默退化为 static：sticky 元素的**直接父容器**必须同时设 max-height（如 400px）和 overflow-y: auto——只写 overflow: auto 不行，也不能靠 body 滚动overflow: hidden、transform、will-change 或 filter，这些会创建新层叠上下文，截断 sticky 锚定链position 显示为 static，非 CSS 问题<table>，这是唯一能在所有编辑器（CodePen/JSFiddle/StackBlitz/VS Code Live Server）中可靠运行的路径：
<div class="thead-sticky">，不能嵌在滚动容器内部.thead-sticky 必须含四要素：position: sticky、top: 0、z-index: 10、background: white
<div class="tbody-scroll">，设 max-height: 400px 和 overflow-y: auto，且与 .thead-sticky 是**同级兄弟元素**style="width: 150px"），table-layout: fixed 在 div 布局中无效position: sticky 失去触发前提：sticky 元素下方有足够长的内容（比如多段 <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 把整个锚定链掐断了。
