position: fixed最可控但需手动处理定位、宽高、避让和滚动；sticky在侧边栏中易因flex容器、overflow/transform干扰或ios safari兼容性失效。
直接用 position: fixed 是最可控的方式，但必须手动补全定位、宽高、避让和滚动控制——position: sticky 在侧边栏场景下浏览器支持不稳定，尤其在 Bootstrap 的 flex 栅格中极易失效。
为什么 sticky-top 加在 .col-md-3 上没反应
不是类名写错了，是它依赖的定位上下文被破坏了：.row 默认是 display: flex 容器，而 position: sticky 在 flex 子项中触发条件苛刻：父容器不能有 overflow: hidden、transform 或 will-change，且必须显式设 top 值（top: auto 无效）。iOS Safari ≤15.4 更是基本不认 left: 0，导致侧边栏卡在左上角或直接消失。
常见现象包括：
-
.col-md-3加了sticky-top后仍随页面滚动 - 强行加
left: 0导致元素不可见或错位 - 桌面端看着正常，真机一测就失效
position: fixed 必须补全的四要素
固定侧边栏脱离文档流，不通知其他元素“我在这”，漏掉任意一项都会导致塌缩、遮挡或滚动失灵。
-
top: 0或top: 56px（若页面有固定.navbar） -
left: 0（锚定左侧起点；写start-0也行，但需确认 RTL 支持） -
width: 250px（fixed元素宽度归零，不能靠栅格类继承） -
height: 100vh（height: 100%会塌陷，因父容器无高度约束）
同时，侧边栏内部容器必须加：
overflow-y: auto-
max-height: calc(100vh - 2rem)（否则长菜单溢出或无法滚动）
主内容区怎么避免被遮挡或穿透
position: fixed 不会自动腾空间，右侧内容必须显式留白。
- 主内容区加
margin-left: 250px（值必须严格等于侧边栏宽度） - 禁用
padding-left——它缩窄内容宽度，干扰文字排版和栅格计算 - 若侧边栏用百分比宽度（如
width: 20%），右栏也要用margin-left: 20% - 右栏若要独立滚动，需设
min-height: 0或height: calc(100vh - 60px)，否则overflow-y: auto不生效
移动端断点最容易崩坏的地方
桌面端跑通不代表上线没问题。90% 的错位、遮挡、滚动卡死，都出在断点处理和层叠上下文上。
- 别指望
col-sm-2+position: fixed自动适配小屏——fixed让它永远显示且无视栅格规则 - 在
@media (max-width: 768px)下，应把侧边栏position改回static，并设display: none；同时清除右栏的margin-left - 检查直系父级是否含
transform（比如 Bootstrap 5 的offcanvas），它会创建新层叠上下文，使fixed相对父级而非视口定位 -
z-index冲突很隐蔽：默认.navbar是 1030，offcanvas是 1140，侧边栏至少设为z-index: 1150才能盖住
最易被忽略的是：fixed 元素内部滚动必须配 overscroll-behavior-y: contain，否则滚动到底部时会穿透到背景页面——这个细节在后台系统里尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
