position: sticky 失效主因是缺乏滚动容器，需确保父元素可滚动且未创建新层叠上下文；大屏用 sticky、小屏切 fixed 时须重置 top/left 并处理尺寸与遮挡；选型取决于滚动上下文需求及兼容性。
position: sticky 看似简单，但多数人加了 top: 0 却没效果——根本原因不是写错了，而是它根本没“滚动容器”可依附。
为什么 position: sticky 在侧边栏上不生效
常见现象：给 .sidebar 加了 position: sticky; top: 0;，但滚动时纹丝不动。
- 它的父元素没滚动行为（比如
height: 100vh+overflow: hidden），sticky 就找不到“粘住”的边界 - 父元素用了
transform、filter或will-change，会创建新层叠上下文，直接让 sticky 失效 - 侧边栏本身被套在
display: flex容器里，而该容器高度未设限或未触发滚动，sticky 无从判断“滚动区域在哪” - 浏览器兼容性：Safari 旧版本（≤15.4）对 sticky 的 flex 容器支持不稳定，建议加
min-height: 1px做兜底
大屏用 sticky、小屏切 fixed 怎么平滑过渡
不能只靠 @media 改 position，否则容易错位或 z-index 混乱。
- 必须显式重置
top和left：小屏下要写top: auto; left: auto;，否则大屏样式仍参与计算 - 小屏用
position: fixed; bottom: 0;时，记得加width: 100%和z-index（建议统一设为100，避免和弹窗冲突） - 如果侧边栏内部有可滚动菜单，小屏下需限制高度：
max-height: 200px; overflow-y: auto;，不然会撑爆 viewport - 别依赖父级定位带出的
padding或margin，所有内边距用独立 class 控制（如.sidebar-padding-sm）
sticky 和 fixed 到底该选哪个
不是“哪个更高级”，而是“谁更适合当前滚动上下文”。
- 适合
sticky：导航栏在主内容区内自然滚动、需随内容进退（比如文章页顶部工具栏）、父容器明确可滚动（overflow-y: auto且内容超长） - 适合
fixed：侧边栏需始终锚定视口左/右边缘、与主内容滚动解耦、需要跨路由保持位置（如后台管理系统的菜单） - 性能差异：sticky 触发重排较轻，但依赖滚动监听；fixed 脱离文档流，渲染开销低，但需手动处理内容遮挡（
margin-left或padding-left） - 兼容性底线：iOS Safari 15.4+、Chrome 56+、Firefox 59+ 支持 sticky；fixed 全平台无压力
最麻烦的从来不是写对那两行 CSS，而是侧边栏在两种定位模式下，子元素的 margin、line-height、transform 表现不一致——这些细节不会报错，但会让小屏点击区域偏移、文字截断、hover 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
