position:sticky没反应最常见的原因是父容器未设高度限制或未触发滚动上下文，它只在最近的可滚动祖先内生效，且必须设置top等偏移值、避免与float等属性共存。
position:sticky 为什么加了没反应？
最常见的原因是父容器没设高度限制或没触发滚动上下文。position:sticky 不是“固定在视口”，而是“在父容器内粘住”，一旦父容器本身不滚动，它就永远不动。
- 父容器必须有明确的高度（比如
max-height+overflow:auto），或者自身处于一个可滚动的上下文中（如或<main></main>） - 不能和
float、clear、display:table-cell等属性共存，否则直接退化为static - 必须设置
top、bottom、left或right中至少一个偏移值，只写position:sticky不生效
sticky 和 fixed 的行为差异在哪？
position:sticky 是条件性定位：元素在滚动到指定阈值前是 relative，过了才“粘”；而 position:fixed 一上来就脱离文档流、相对于视口定位。
-
sticky元素仍占据原始文档流位置，不会导致下方内容上跳；fixed会完全脱离流，常需额外margin补位 -
sticky受父容器裁剪影响（比如overflow:hidden的父级会截断粘住后的部分）；fixed不受父级overflow影响 - 移动端 iOS Safari 对
sticky的支持从 v15.4 才真正稳定，老版本可能需要-webkit-sticky前缀（但现代项目通常不用加）
盒模型尺寸怎么影响 sticky 效果？
padding、border、margin 本身不干扰粘性逻辑，但会影响“何时开始粘”和“粘住后是否被遮挡”。关键在于 top 值是相对于**包含块的 padding box 边缘**计算的。
- 如果父容器有
padding-top: 20px，且你设top: 0，那元素实际会在距离父容器内边 20px 处开始粘住 - 子元素用
width: 100%时，若父容器有padding，又没设box-sizing: border-box，就会撑出横向滚动条，间接破坏 sticky 的滚动上下文 - 避免给 sticky 元素设
height: 100vh—— 它会拉高父容器，可能让滚动失效
多层嵌套时 sticky 为什么只在最外层生效？
position:sticky 的“粘性范围”只限于**最近的具有滚动能力的祖先容器**。它不会跨过中间某个 overflow: hidden 的父级继续向上找。
- 检查 DOM 路径中是否存在
overflow: hidden、overflow: clip或未设高度的父级 —— 它们会切断 sticky 的作用域 - 如果想在表格里让
<thead> 粘住，必须确保 <code><table> 或其直接父容器可滚动（常见做法是套一层 <code><div style="max-height:400px;overflow:auto">） <li>Flex 或 Grid 容器中使用 sticky，要确认该容器本身不是 <code>overflow:hidden，且子项未用align-self:stretch撑满导致无滚动余地
真正卡住的地方往往不是语法写错，而是滚动上下文被某层看不见的 overflow:hidden 或缺失的 max-height 截断了。调试时优先用浏览器开发者工具逐层检查父节点的 overflow 和 height 计算值。
