Sticky定位在HTML在线运行器中常失效，是因为默认渲染区域无明确高度或overflow，导致sticky元素缺乏可滚动的最近定位祖先容器；需为其直接父容器设置max-height和overflow-y: auto，并避免flex容器未设高度、transform干扰及iframe沙箱影响。
Sticky 定位在 HTML 在线运行器里为什么常失效
直接写 position: sticky; 却没反应？大概率是父容器没设高度限制或触发条件不满足。HTML 在线运行器（如 JSBin、CodePen、JSFiddle）默认渲染区域没有明确 height 或 overflow，导致 sticky 元素“无处可粘”——它需要一个有滚动行为的**最近定位祖先容器**，而根 或 <div id="app"> 若没设 <code>max-height + overflow-y: auto，浏览器就认为整个页面在滚动，sticky 失去锚点。
常见错误现象：top: 0; 写了但标题始终随页面一起滚走；检查 computed styles 会发现 position 已变成 static —— 这是浏览器主动降级，不是 bug。
- 必须给 sticky 元素的**直接父容器**设置
max-height和overflow-y: auto - 避免父容器是
display: flex且未设高度（flex 容器不自动触发滚动上下文） - 在线运行器中慎用
作为 sticky 父级，优先包裹一层<div class="list-container"> <h3>长列表中让 <code><h2></h2>标题吸顶的最小可行代码不用框架、不依赖 JS，纯 CSS 实现：每个标题加
position: sticky;，并确保其父容器可滚动。关键不是“怎么写 sticky”，而是“怎么搭结构”。<div class="list-container" style="max-height: 400px; overflow-y: auto;"> <h2 style="position: sticky; top: 0; background: white; z-index: 10;">Section A</h2> <p>item 1</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries"><img src="https://img.php.cn/upload/skill/000/000/081/178971312885770.jpg" alt="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries">Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries</a> <p>规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...</p> </div> <a href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>item 2</p><p>...</p> <h2 style="position: sticky; top: 0; background: white; z-index: 10;">Section B</h2> <p>item 1</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>item 2</p><p>...</p> </div>注意三点：
-
z-index必须设（哪怕只是1），否则被后续内容遮盖 -
background要显式声明，不然吸顶后底下的文字会透上来 -
top值决定吸顶位置，多个标题共存时，后一个会把前一个“顶上去”，这是预期行为
多个 sticky 标题重叠时怎么控制显示顺序
当列表很长、标题密集，滚动到中间时可能出现两个
<h2></h2>同时处于“吸顶态”并重叠。这不是 bug，是 sticky 的自然行为：每个元素只对自己所在滚动视口生效，但它们都钉在同一个top: 0位置。解决思路不是阻止重叠，而是让视觉上可区分：
- 用
transform: translateY()微调后一个标题的位置（例如第二个标题加transform: translateY(2px);） - 更稳妥的做法是改用
top分层：第一个标题top: 0，第二个top: 48px（假设标题高 48px），但需配合 JS 动态计算——在线运行器中建议先用静态分层验证效果 - 避免对同一容器内多个同级 sticky 元素设相同
top值，尤其当它们高度不一致时
Chrome 和 Safari 对 sticky 的兼容性差异点
在线运行器多数基于 Chromium，但用户可能用 Safari 打开分享链接。Safari（尤其 iOS 15.4 之前）对 sticky 的支持更苛刻：
- Safari 要求 sticky 元素的父容器不能有
transform、perspective或filter（哪怕值是none），否则直接禁用 sticky - 如果父容器用了
will-change: transform，Safari 也会失效 - 部分旧版 Safari 不支持
sticky在<table> 内部工作，长列表别用 table 布局 <li>测试时务必在真机 Safari 上验证，仅靠在线运行器的预览不够</li> <p>最易被忽略的一点：在线运行器的 iframe 沙箱环境有时会干扰 <code>position: sticky的滚动上下文检测，遇到异常时，把代码复制到本地.html文件中打开，能快速确认是不是运行器本身的问题。
-
