直接给 .col-md-3 加 position: fixed 会塌缩至左上角，因其作为 .row 的 flex 子项脱离文档流后失去弹性约束，宽度归零、left/top 默认为 0，右侧内容顶替其位置造成遮挡。
为什么直接给 .col-md-3 加 position: fixed 会塌缩到左上角
因为 .col-md-3 是 .row 的 flex 子项，依赖父容器的弹性布局分配宽度和位置；一旦加 position: fixed，它就脱离文档流，flex 约束失效，浏览器不再计算其宽度，结果渲染为 width: auto（常接近内容宽度），同时 left/top 默认为 0，视觉上卡在视口左上角。右侧 .col-md-9 也因“看不见”侧边栏而直接顶上来，造成遮挡。
position: sticky 在 Bootstrap 5 中怎么配才真正生效
Bootstrap 5 的 position-sticky 工具类只是声明 position: -webkit-sticky; position: sticky，但 sticky 生效有硬性上下文要求，不是加了类就自动粘住：
- 必须显式设
top值（如top-0或top-3），只写position-sticky会降级为relative - 直系父容器（比如
.col-md-3）不能有overflow: hidden、transform、filter或contain: layout—— 这些会截断粘性上下文 - 父容器需有明确高度：推荐用
h-100+html, body { height: 100% }，避免calc(100vh - 64px)在 Firefox 下因字体加载延迟导致高度抖动 - 若侧边栏放在
.offcanvas或.navbar内部，它们自带transform，sticky 直接失效
用 position: fixed 实现固定宽度时，右侧内容怎么不被遮挡
fixed 元素完全脱离文档流，右侧内容不会自动让位。你必须手动补全三处关键值，且它们必须严格一致：
- 侧边栏内部容器（如
.sidebar-inner）设width: 250px（不能只靠w-25，它不保证像素精度） - 同容器设
start-0 top-0 h-100和overflow-y-auto，确保滚动可用 - 右侧主内容区（如
.col-md-9）必须加ms-xx类或显式margin-left: 250px—— 注意是ms-（margin-start），不是ml-，否则 RTL 场景错乱 - 如果用了 CSS 变量控制宽度（如
--sidebar-width: 250px），右侧 margin 应写成margin-left: var(--sidebar-width)，便于统一维护
响应式断点下侧边栏如何正确收起/展开
桌面端用 fixed/sticky，小屏必须切换逻辑，不能只靠 d-none d-md-block：
- 小屏（
max-width: 768px）应移除position: fixed或sticky，改用offcanvas包裹整个侧边栏结构 -
offcanvas-body内的搜索框必须加me-2（右外边距），否则 iOS Safari 触发 viewport overflow 保护，软键盘闪退 - 点击搜索输入框时，需监听
focusin并主动调用bootstrap.Offcanvas.getInstance(...).hide()，避免菜单卡在展开态 - 别在
offcanvas外层再套.col—— offcanvas 本身已脱离栅格流，套了反而干扰定位
实际最易忽略的是祖先元素的 transform 和 overflow 隐形拦截，DevTools 里看 Computed 的 position 是否真解析为 sticky，比反复调样式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
