直接用position: fixed就能实现侧边栏固定，但必须配top/left、width、z-index和height: 100vh；float+clear不行，因float仍在文档流且与fixed互斥；主内容需设margin-left避让，iOS Safari需加transform: translateZ(0)防闪烁。
直接用 position: fixed 就能实现，但必须配 top、left（或 right）、width 和 z-index，否则不会真“固定”，还会遮挡主内容。
为什么 float + clear 不行
浮动元素仍在文档流里，float: left 加 clear: both 只是解决塌陷，不是定位；position: fixed 和 float 互斥，写了 fixed 后 float 自动失效。常见错误是给目录栏加 float 还试图用 clear 控制位置，结果既不固定、又干扰主内容流。
必须设 width 和 top/left
position: fixed 本身不带默认位置，只写这一条等于没写。要让它贴左显示，至少得：
-
left: 0或right: 0 -
top: 0（或具体偏移值，比如避开固定头部） -
width: 240px（推荐固定值，避免响应式错位） -
height: 100vh（撑满视口高度，比100%更可靠）
主内容区怎么不被遮住
固定侧栏脱离文档流，主内容不会自动绕开它。必须手动预留空间：
立即学习“前端免费学习笔记（深入）”；
- 如果侧栏在左边，给主内容容器加
margin-left: 240px（值 ≥ 侧栏宽度） - 不要用
padding-left替代，它会缩窄内容宽度，影响文字排版和响应式表现 - 若页面已有固定顶部导航，侧栏的
top要同步留出导航高度，比如top: 64px，主内容的margin-top也得对应加高
iOS Safari 中 fixed 元素闪烁或消失
这是老问题，尤其在滚动时。解决方案很简单，但容易被忽略：
- 给固定侧栏加
transform: translateZ(0)或will-change: transform - 这两个声明会触发硬件加速，强制 iOS Safari 用独立图层渲染该元素
- 仅在移动端加，PC 端无需，否则可能引发其他渲染异常
最易漏的是 z-index —— 如果主内容用了 position: relative 却没设 z-index，而侧栏又没显式设 z-index，在某些浏览器中侧栏会被压在下面。固定元素默认 z-index: auto，不是“最高”，这点必须手动干预。
