fixed侧边栏错位是因祖先元素的transform等属性触发新包含块，致其相对父级而非视口定位；应检查Computed面板的Containing Block字段，移除干扰样式或把侧边栏移至body下。
fixed侧边栏突然“跟着滚动”或错位定位
这不是浏览器 bug，而是 fixed 元素的定位基准被父级悄悄改写了。只要任意祖先元素有 transform、filter、will-change 或 perspective，就会触发新包含块（containing block），导致 position: fixed 相对那个父元素定位，而非视口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Elements → 选中侧边栏 → 右侧 Computed 面板下拉到底，查 “Containing Block” 字段：如果不是
html或body，就说明被某个父级劫持了 - 逐级检查父容器的 CSS，重点删掉
transform: translateZ(0)、filter: opacity(0.99)这类“隐形陷阱” - 若必须保留这些效果，直接把侧边栏 DOM 移到
<body>下一级，绕过所有干扰层级 - 务必显式写
top: 0; left: 0;，不能只靠inset: 0—— 某些旧版 Safari 对inset解析不一致
侧边栏显示不全、底部被裁剪或留白
position: fixed 元素默认高度仅包裹内容，不会自动拉满视口。常见现象是菜单只显示前几项，下方一片空白或露出主内容背景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加
top: 0; bottom: 0;（或inset: 0 auto 0 0），让元素从视口顶延伸到底 - 避免用
h-screen或min-h-screen：它们编译为height: 100vh，在 iOS 软键盘弹出时会塌缩，导致底部消失 - 更稳妥的组合是
min-h-[100dvh] top-0 bottom-0，但需确认 Tailwind ≥ 3.3 且目标浏览器支持dvh（iOS 16.4+、Chrome 109+） - 若内部用
flex flex-col，子项别设h-full或min-h-0，否则会破坏 flex 的 stretch 行为
右侧主内容被遮挡或滚动异常
fixed 侧边栏脱离文档流后，主内容根本“感知不到”它存在。你设了 margin-left: 240px，但一旦页面缩放、软键盘弹出或 Safari 地址栏收起，这个值就失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主内容容器（如
<main>）必须独立包裹，不能直接对body设margin-left，否则整页出现滚动条 -
margin-left值必须严格等于侧边栏总宽度（含border和padding），推荐用calc(100% - 240px)替代固定像素值 - 主内容区自身要接管滚动：加
height: calc(100vh - 60px)（减去顶部 header 高度）、overflow-y: auto、overscroll-behavior-y: contain - 别信
scroll-margin-left—— 它根本不存在，CSS 规范里只有scroll-margin-top等纵向属性
移动端点击失灵、滚动卡顿或缩放后错位
iOS Safari 对 position: fixed 的支持本就脆弱。系统级缩放（如“更大字体”）、软键盘唤起、地址栏收起都会导致 fixed 元素锚定在旧逻辑视口坐标上，视觉位置和点击区域严重偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用缩放不是万能解：
<meta name="viewport" content="... maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">必须三者共存才有效，但会违反 WCAG 可访问性要求 - 优先用
position: sticky替代：兼容 iOS 15.4+/Chrome 56+，不受缩放影响，行为更可预测 - 必须用 fixed 时，监听
visualViewport动态修正位置：visualViewport.addEventListener('resize', () => { el.style.top = visualViewport.offsetTop + 'px'; }) - 删掉
body { overflow: hidden }—— 它会禁用 iOS 原生滚动惯性，尤其在侧边栏内部滚动时卡顿明显
真正难处理的是层叠上下文与包含块的嵌套干扰——它们不报错、不警告，只在滚动、缩放、横竖屏切换时悄然发作。调试时别急着改 z-index，先看 Computed 面板里的 Containing Block 和 Stacking Context。
