必须显式设置top、bottom、left或right中至少一个值，否则position: sticky等同于relative；阈值需为具体长度值（非auto），且作用于最近可滚动祖先容器内边界，top优先级高于bottom，left高于right。
必须显式设置 top、bottom、left 或 right 中的至少一个值，否则 position: sticky 等同于 position: relative，完全不生效。
为什么只写 position: sticky 没反应？
这是最常见误操作。CSS 规范明确要求：粘性定位不是“开关式”属性，它需要一个触发锚点——即阈值（threshold）。没有这个锚点，浏览器根本不会启动滚动监听逻辑。
以下写法全部无效：
div { position: sticky; } /* ❌ 缺少阈值 */
div { position: sticky; top: auto; } /* ❌ auto 不是有效阈值 */
div { position: sticky; margin-top: 10px; } /* ❌ margin 不参与阈值计算 */
正确写法示例：
header { position: sticky; top: 0; } /* ✅ 吸顶 */
footer { position: sticky; bottom: 0; } /* ✅ 吸底 */
aside { position: sticky; left: 20px; } /* ✅ 左侧吸附 */
top 和 bottom 同时设置时，哪个起作用？
垂直方向存在明确优先级：top 的优先级高于 bottom。只要同时声明两者，bottom 会被忽略，且不报错、不警告。
-
top: 10px; bottom: 20px;→ 实际只按top: 10px计算 -
bottom: 20px; top: auto;→ 此时bottom生效（因为top被设为无效值） - 水平方向同理：
left优先于right
多方向阈值不能“叠加生效”，它们是互斥的触发条件，不是布局约束。
阈值到底是相对于谁计算的？
不是视口（viewport），而是**最近的可滚动祖先容器的内边界**。这点极易误解，直接导致定位错位。
常见场景判断：
- 元素直接在
下，且body可滚动 →top: 0表示贴到浏览器顶部 - 元素在
<div class="scroll-container"> 内，该 div 设置了 <code>height: 400px; overflow: auto;→top: 0表示贴到该 div 的顶部内边距起点，而非整个页面顶部 - 若父容器设置了
overflow: hidden→ 粘性定位立即失效，哪怕写了top: 0 - iOS Safari 15.4 之前版本需加
-webkit-sticky前缀（虽然现在基本淘汰，但若需支持极老用户仍要保留） - Safari 对嵌套 sticky 元素支持不稳定：比如表格中
<th> 设了 <code>sticky，其父<thead> 也设了 <code>sticky，可能只生效外层或完全失效 - IE 和 Edge 15 及更早版本完全不支持，无 polyfill 可用，必须降级为 JS 监听
scroll
验证方法：给最近祖先加临时边框和 outline: 1px solid red，滚动时观察元素是否对齐该容器边缘。
移动端 Safari 和旧版浏览器怎么兼容？
目前（2026年）主流浏览器已原生支持 position: sticky，但仍有两个现实坑点：
安全写法：
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
真正容易被忽略的，是“滚动容器必须有真实滚动空间”——如果 sticky 元素上方内容太短，或者父容器高度刚好卡死，滚动事件压根不触发，阈值就永远达不到。别只盯着 CSS，先检查 DOM 高度和 overflow 行为。
