position: sticky 不是盒模型属性，而是定位机制，依赖滚动容器边界、偏移阈值及层叠上下文，与 margin、padding、box-sizing 等无关；其生效需满足父容器有可滚动区域、显式设置 top 等偏移值、祖先无 transform/filter 等中断属性。
position: sticky 不是盒模型的一部分，它属于 position 定位体系，和 display: flex、display: grid 或 box-sizing 这类盒模型属性无关。想靠调整 margin、padding、border-box 或 flex-shrink 来“实现”粘性效果，注定失败。
为什么 sticky 不能靠盒模型“实现”
粘性定位的本质是滚动行为触发的定位模式切换（relative → fixed → relative），它依赖的是：滚动容器的边界、元素自身偏移阈值、渲染树中祖先节点的层叠与变换上下文。盒模型只管尺寸、内边距、外边距和内容排列，不参与滚动判定逻辑。
常见误解是认为“把父容器设成 display: flex 就能用 sticky”，但实际中：flex 容器若没设 align-items: flex-start，子元素可能被居中或拉伸，导致 top 偏移量失效；grid 容器若用 justify-items: center，也会让 sticky 元素初始位置偏离预期。
所以不是“用盒模型实现 sticky”，而是“在盒模型布局中正确启用 sticky”。
sticky 生效必须满足的滚动上下文条件
它不看你的 width 或 box-sizing，只认这几条硬规则：
- 父容器必须有可滚动区域：要么设了
height或max-height+overflow: auto/scroll；仅overflow: hidden或未设高度 = 无滚动 = sticky 不触发 - sticky 元素自身必须指定
top、bottom、left或right中至少一个（top: 0最常用） - 祖先链中不能出现
transform、perspective、filter或contain: layout style paint—— 这些会创建新的包含块，中断 sticky 的滚动感知 - sticky 元素不能是
display: table-row、table-cell等表格内部 display 值（Safari 尤其敏感）
在 Flex/Grid 布局中让 sticky 正常工作的关键点
很多人在 display: flex 外层里套一个 position: sticky 导航栏，结果一滚动就失效。问题往往出在对齐方式上：
- Flex 容器默认
align-items: stretch，如果 sticky 元素没设高度，它会被拉满父容器高度，top: 0就失去参照意义 - Grid 容器若用
grid-template-rows: 1fr，且 sticky 元素放在该区域，它可能被撑开，导致初始位置不在视口顶部 - 解决办法统一：给 sticky 元素显式设
align-self: flex-start（Flex）或justify-self: start（Grid），确保它“贴在顶部起点” - 同时检查父容器是否意外加了
transform: translateY(0)—— 即使值为 0，也足以禁用 sticky
Safari 和 iOS 上 sticky 失效的典型场景
2026 年 Safari 15.4+ 已基本支持，但仍有两个高频陷阱：
- 父容器用了
contain: content或contain: strict，会直接屏蔽 sticky 行为（不是 bug，是规范定义） - 在
position: sticky元素上同时写了will-change: transform，某些 iOS 版本会忽略粘性逻辑 - 移动端
body滚动时，若页面根容器（如#app）设了overflow-y: scroll，但没加-webkit-overflow-scrolling: touch，iOS 可能无法正确触发临界点判断 - 补救方案：始终加
position: -webkit-sticky前缀；对 iOS 用户，宁可多一层 wrapper 并设height: 100vh; overflow-y: scroll，也不依赖 body 滚动
真正难的不是写 position: sticky，而是排查哪一层祖先悄悄加了 transform、哪段 CSS 意外启用了 contain、或者哪个 UI 库的组件默认包裹了一层 flex 容器却没重置 align-items。这些地方不翻 DOM 树、不看 computed styles，光看样式表根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
