固定侧边栏布局需解决主内容避让、滚动上下文干扰和响应式断点同步三大问题；iOS/缩放偏移源于fixed受transform祖先影响；应优先用sticky替代fixed，必要时用flex: 0 0 240px+box-sizing:border-box确保宽度稳定。
固定侧边栏布局不是“加个 position: fixed 就完事”，真正卡住的往往是主内容避让、滚动上下文干扰和响应式断点同步——多数视觉错位和横向滚动条都源于这三点。
为什么 position: fixed 侧边栏在 iOS 或缩放时偏移/悬空
它不是相对于整个视口定位，而是相对于最近一个有 transform、perspective 或 will-change（且值不为 auto）的祖先元素。一旦父容器带 transform: translateZ(0)（常见于动画或硬件加速优化），fixed 就会“钉”在那个父容器里，而不是屏幕左上角。
- 用浏览器开发者工具检查侧边栏所有上级元素的
computed styles，重点看transform、will-change - 临时移除疑似干扰的 class 或内联样式，确认是否恢复
- 若必须保留 transform（如抽屉动效），改用
position: sticky+top: 0，但需确保父容器没有overflow: hidden或scroll
display: flex 方案中主内容被切掉或溢出
常见错误是只写 .sidebar { width: 240px; }，却没加 flex-shrink: 0 和 box-sizing: border-box，导致内边距或边框撑宽、内容多时侧栏被压缩，或主区仍占满 100% 宽度引发横向滚动条。
-
.sidebar必须设flex: 0 0 240px（不放大、不缩小、基准宽 240px），比单纯width更可靠 - 如有
padding或border，务必加box-sizing: border-box，否则实际宽度 =240px + padding × 2 + border × 2 -
.main用flex: 1（等价于flex: 1 1 auto），别写flex: 1 1 0，否则可能在小屏下收缩异常 - 父容器要设
min-height: 100vh，避免内容少时高度塌陷
移动端收起侧边栏后主内容不重排
只设 visibility: hidden 或 opacity: 0 不行——侧栏 DOM 还在，宽度未释放，margin-left 也没变，主内容区域依然“以为”它存在。
- 收起状态应同时设：
width: 0、overflow: hidden、transition: width 0.3s ease - 主内容区域用相邻兄弟选择器同步重置：
.sidebar.collapsed + .main { margin-left: 0; } - 避免用 JS 动态计算并设置
style.marginLeft，SSR 渲染和首屏会错乱，且无 CSS fallback - 收起按钮热区至少
44px × 44px，iOS Safari 对小点击目标识别不准
要不要用 position: sticky 替代 fixed
绝大多数导航类侧边栏（比如文档目录、后台菜单）更适合 sticky：它不脱离文档流，主内容自动避让，无需手动留白；滚动到临界点才吸附，行为更自然；也没有 iOS viewport 缩放导致的定位跳动问题。
- 前提是父容器不能有
overflow: hidden、auto或scroll，否则吸附失效 - 必须指定
top或bottom（如top: 0），否则不生效 - IE11 不支持，如需兼容，只能降级为
fixed+ JS 监听scroll手动更新top - 如果侧栏本身高度超过视口（比如长菜单），
sticky会在滚动到底部时“消失”，这时才考虑fixed
最易被忽略的一点：无论用哪种方案，侧边栏宽度变化（比如响应式收起/展开）必须通过 CSS @media 同步控制主内容的 margin-left 或 flex 值——JS 动态计算宽度再设 style 是不可靠的兜底手段，不是主逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
