AI 摘要：本文详细讲解了 CSS 中 position: sticky 的工作原理及常见失效原因。作者通过多个代码示例展示了粘性定位受容器尺寸、父元素溢出属性、Flex/Grid 对齐方式等多重因素影响的微妙机制，并结合实际开发经验提供了解决思路：理解“包含块”(containing block) 与 align-self 的行为是调试 sticky 效果的关键。文章最后提出通过合理设置元素尺寸与滚动策略，可以避免粘性元素“失灵”或“溢出”的问题。

1. 粘性定位基础与预期行为
• 简介 position: sticky 的作用：元素在滚动到指定位置后固定。
• 通过最简示例展示 sticky top-0 的典型效果。
• 提醒常见误区：overflow: hidden 会阻断粘性效果。

2. 当事情出错时：粘性元素尺寸与容器关系
• 若粘性元素高度超过滚动容器，粘性效果部分失效。
• 浏览器会强制展示完整内容，导致“脱粘”现象。
• 实战提示：检查粘性元素与滚动容器的尺寸匹配。

3. 失效原因二：粘性元素的包含上下文过小
• 引用 CSS 规范，解释“粘性视口矩形”(sticky view rectangle) 概念。
• 说明粘性约束受到父容器边界限制，不能“突破”祖先容器。
• 举例当粘性元素嵌套于非滚动父层时如何导致“无法粘住”。

4. Flex / Grid 子元素场景下的典型陷阱
• Flex 子元素默认 align-self: stretch 会撑满交叉轴，破坏粘性条件。
• 解法：将父级和粘性元素设为 self-start，避免强制拉伸。
• 讲解 Grid 布局中相同现象与对应修复思路。

5. 优化方案与进阶技巧
• 若导航面板内容过长，可通过 max-height + overflow: auto 实现内部滚动。
• 结合实际项目经验，推荐为容器加 padding 时考虑剩余高度计算。
• 通过 CSS 变量或逻辑视口单位（如 100dvh）提升布局稳定性。

6. 总结与思考
• position: sticky 核心原则：不能突破容器边界、必须在正确的滚动上下文中。
• align-self 和容器尺寸管理是让粘性布局正常工作的关键。
• 理解规范、调试实际场景，是掌握 sticky 行为的根本。

Frontend Masters

The Weird Parts of position: sticky;

Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.