position: sticky 常常不工作，因其依赖父容器具备明确高度且不触发新层叠上下文；Bootstrap 中 .row 缺少 h-100、navbar/offcanvas 的 transform 或 overflow: hidden 隐性拦截、iOS Safari 对 flex 容器内 sticky 支持不稳定，均会导致失效。
直接用 position: fixed 是唯一稳定生效的方案，position: sticky 在多数 bootstrap 布局中会失效或行为不可控。
为什么 position: sticky 常常不工作
它依赖父容器有明确高度且不触发新层叠上下文。Bootstrap 的 .row 默认是 flex 容器，但若没加 h-100 或 min-height: 100vh，sticky 就“粘不住”；更常见的是，navbar、offcanvas 或自定义动画悄悄给父级加了 transform 或 overflow: hidden，直接让 sticky 失效——不是代码写错，而是被隐性样式拦截了。
- 检查浏览器开发者工具里侧边栏直系父元素的 computed 样式，重点看
transform、will-change、overflow - 哪怕只有一层祖先带
transform: translateY(0)，sticky 就会以该容器为参考系，而不是视口 - iOS Safari 对 flex 容器内的 sticky 支持仍不稳定，尤其在 modal 或 offcanvas 弹出后
position: fixed 必须配齐的四要素
漏掉任意一个，侧边栏就会塌缩到左上角、遮挡内容、或内部无法滚动。
-
top: 0和left: 0（或 Bootstrap 工具类top-0 start-0）：锚定起始位置，否则默认偏移不可控 -
width: 250px（不能只靠col-md-3，fixed 下栅格类完全失效） -
height: 100vh（必须用vh，100%在 fixed 下会塌陷） -
overflow-y: auto加在侧边栏内部容器上，否则长菜单滚不到底
右侧内容怎么不被遮住
fixed 元素脱离文档流，右侧不会自动避让。你得手动腾空间，且值必须和侧边栏宽度严格一致。
- 给右侧主内容区加
margin-left: 250px（不是ms-md-3，那些工具类数值不精确） - 如果侧边栏用百分比宽度（如
width: 20%），右侧也得用margin-left: 20%同步 - 移动端断点（如
@media (max-width: 768px)）里，要同时清除margin-left并设display: none，否则白边卡住内容 - 右侧外层容器必须设
height: calc(100vh - 56px)（减去 navbar 高度），再加overflow-y: auto才能真正独立滚动
z-index 和层叠上下文最容易翻车
侧边栏“消失”或被遮挡，90% 是因为层叠上下文冲突，不是 z-index 数值不够大。
- Bootstrap 5 的
.navbar默认z-index: 1000，.offcanvas是1140，侧边栏设z-index: 1020即可盖住 navbar 又不压住弹窗 - 避免硬写
z-index: 9999——第三方组件（如日期选择器）可能也用超大值，反而覆盖冲突 - 关键不是数值大小，而是层级关系：确保侧边栏和 navbar 不在同一个层叠上下文里；如果 navbar 父级有
transform，侧边栏就得移到body底部并重置定位
真正卡住人的从来不是怎么写 position: fixed，而是它和父容器之间那些看不见的层叠上下文绑定——一个 transform、一行 overflow: hidden，就能让整个布局无声崩坏。
