position: sticky在侧边栏上常失效，因它依赖可滚动祖先容器；父容器无滚动、含overflow/transform/filter、未设top值或脱离flex/grid上下文均导致静默退化；推荐优先用position: fixed并手动处理margin与z-index。
绝大多数情况下，position: sticky 在侧边栏上根本不会生效——不是你写错了，而是它压根没触发条件。真正能稳定工作的方案，通常是 position: fixed；只有当你明确需要“随主内容滚动进退”且父容器完全可控时，才值得花时间调 sticky。
为什么 position: sticky 在侧边栏上常是“写了等于没写”
它不依赖视口，而依赖最近的、有滚动能力的祖先容器。常见失效链路如下：
- 侧边栏父级是
main或section，但没设height或max-height，内容没溢出 → 没滚动行为 →sticky不启动 - 父容器或任意上层加了
overflow: hidden、transform: translateZ(0)、filter: opacity(0.99)→ 切断滚动上下文，sticky静默退化为static - 只写了
position: sticky，却漏掉top（比如top: 16px）→ 默认top: auto，不满足触发阈值 - 侧边栏被包在额外的
div里，而该div不是 flex/grid item → 脱离布局上下文，sticky失效
position: fixed 实操要点（推荐首选）
它绕过所有滚动上下文限制，直接锚定视口，适合绝大多数侧边栏场景：
- 必须手动指定
top和right（或left），例如top: 64px; right: 0;（64px 是顶部导航栏高度） - 正文区域要主动让位：右侧栏就加
margin-right: 280px，左侧栏就加margin-left: 280px（数值需严格匹配侧边栏宽度） - 移动端必须处理：用媒体查询把
fixed改成static，或配合display: none+ 汉堡菜单控制显隐 - 注意 z-index：
fixed元素脱离文档流，若被遮挡，需显式设置z-index值并确保其父容器未创建新层叠上下文
坚持用 sticky 时，必须满足的硬性结构条件
如果你确实需要它随主内容自然滚动（比如滚动到底部后停住），那必须同时满足以下两点：
- 侧边栏本身是
flex item或grid item，不能套一层无关div包裹它 - 它的直接父容器（即 flex/grid container）必须有明确高度约束，例如
height: 100vh或max-height: calc(100vh - 64px) - 侧边栏必须设
top: 16px（或其他具体值），不能留空；bottom在侧边栏场景中基本不可靠，别依赖它做底部留白 - 想实现“离 footer 还剩 20px 就停”，正确做法是给父容器加
padding-bottom: 20px，而不是设bottom: 20px
容易被忽略的兼容性与性能细节
这些点不报错，但会让效果在特定设备或状态下突然崩坏：
- iOS Safari ≤15.4 对局部滚动容器（如
overflow-y: auto的div）里的sticky支持极差，降级检测应使用CSS.supports('position', 'sticky') - 在
flex容器中，若侧边栏未设align-self: flex-start，flex 对齐逻辑可能压制sticky行为 - 不要给
sticky元素或其任意祖先加will-change: transform—— 现代 Safari 会直接放弃计算粘性位置 -
top值慎用百分比（如top: 10%），它基于滚动容器高度计算，在响应式缩放中极易错位；优先用px、rem或vh
真正麻烦的从来不是写哪行 CSS，而是搞清“谁在滚动、谁被截断、谁在创建新层叠上下文”。sticky 是个精密开关，不是胶带；一旦环境不对，它就彻底沉默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
