在网页布局中，position:sticky 是一种兼具相对定位和固定定位特点的属性，能让元素在滚动到特定阈值时“粘”在视口某处。但实际开发里，不少页面写完 sticky 却毫无效果，元素照常随文档流滑走。要排查这类问题，得先理解它的运作依赖哪些前提。
一、未设置有效的偏移值
sticky 定位必须搭配至少一个方向偏移量（top、bottom、left、right）才会生效。如果只写了 position:sticky 而没有声明 top:0 之类的值，浏览器会将其当作普通相对定位处理，自然不会出现吸顶或吸底行为。
以下代码就是一个典型错误写法，元素不会表现出任何粘性：
.nav {
position: sticky;
/* 缺少 top/bottom/left/right 中任意一项 */
}
正确方式应当明确阈值，比如希望导航在距视口顶部 0 像素时固定，就要补上 top 属性：
.nav {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
从表现看，偏移值决定了“什么时候开始粘”。若 top 设为 20px，则元素滚动到距离视口顶部 20px 时才固定。因此漏写偏移是最基础也最易被忽略的失效原因。
二、父容器或滚动祖先限制了溢出
sticky 元素会相对于“最近的滚动祖先”进行吸附。如果某个祖先容器设置了 overflow:hidden、overflow:auto 且自身高度有限，sticky 元素便只能在该容器内部滚动时生效，一旦容器本身不滚动或高度被截断，吸顶效果就会消失。
看下面这段结构，外层盒子高度固定且 overflow:hidden，内部 sticky 元素无法突破盒子粘到页面视口：
<div class="wrap" style="height:200px;overflow:hidden;"> <div class="sticky-box" style="position:sticky;top:0;">侧边标题</div> <p>很多文字内容……</p> </div>
此时 .sticky-box 只在 .wrap 的 200px 范围内滚动才可能粘住，但 .wrap 自身并未产生滚动条，所以视觉上完全无效。解决办法是移除祖先的 overflow 限制，或让真正滚动的容器成为 sticky 的直接父级。
此外，若页面整体滚动发生在 body，但 sticky 元素被包在 overflow:clip 的层中，同样会失效。开发者可用浏览器检查工具逐层查看哪个祖先截断了滚动流。
三、祖先元素使用了 transform 等属性
当 sticky 元素的任一祖先设置了 transform、filter、perspective 且值不为 none 时，该祖先会生成新的包含块。sticky 元素将相对于这个包含块计算位置，而非相对视口，导致“粘性”范围缩小到祖先盒子内。
例如下方代码中，父级加了 transform:translateZ(0) 做渲染优化，却让子级 sticky 不再相对页面吸顶：
<div class="parent" style="transform:translateZ(0);"> <div class="child" style="position:sticky;top:0;">标题</div> </div>
这种场景在移动端适配或动画库中极常见。排查时可在 DevTools 中搜索 transform 样式，临时关闭后观察 sticky 是否恢复。若必须保留变换，可将 sticky 元素移出该祖先，或调整布局结构使其直接处于滚动容器内。
除了 transform，will-change:transform 也会触发类似包含块创建行为，应一并检查。
四、表格与弹性盒中的特殊表现
在表格中，sticky 只能作用于 <th>、<td> 等表格单元，且需确保表格未被父级异常包裹。若把 sticky 写在 <table> 上而非 <thead> 内的 <th>，则多数浏览器不会让其吸顶。
弹性盒（flex）里，sticky 元素作为 flex item 时，其粘性行为受 align-items 影响。若交叉轴方向尺寸被拉伸，可能看起来没粘住。示例：
.flex-box {
display: flex;
align-items: stretch;
}
.flex-box .side {
position: sticky;
top: 0;
align-self: flex-start; /* 需显式设自身对齐 */
}
上例中若省略 align-self，side 会被拉伸至容器高度，滚动时虽 sticky 生效但视觉差异不明显。因此表格与 flex 布局中要结合上下文确认 sticky 的承载元素是否正确。
五、浏览器兼容与文档模式
现代浏览器已普遍支持 sticky，但旧版 IE 完全不支持，某些嵌入式 webview 也可能存在缺陷。若项目需兼容老旧环境，应通过 @supports 做降级：
@supports not (position: sticky) {
.nav {
position: fixed;
top: 0;
}
}
另外，若页面以怪异模式（Quirks Mode）渲染，部分 CSS 行为会偏移。应保证文档首行有标准 doctype 声明，避免解析差异引起的粘性异常。
总结来说，sticky 失效极少是属性本身问题，多是布局链条中某环打破了它的滚动依赖。从偏移值、溢出控制、包含块创建、特殊布局到运行环境逐层核查，便能高效修复。