直接给 .col 加 position: fixed 会错位，因其脱离文档流而失去栅格约束，导致位置塌缩、宽度归零、内容重叠；正确做法是固定外层容器并用 CSS 变量统一控制宽度与 margin。
为什么直接给 .col 加 position: fixed 会错位
Bootstrap 的 .col 是 flex 子项，默认依赖父级 .row 的布局流；一旦设为 position: fixed，它就脱离文档流，不再受栅格系统约束，导致水平位置丢失（常向左上角塌缩）、宽度归零、与右侧内容重叠。
关键不是“能不能加 fixed”，而是“加在哪一级、怎么补布局空缺”：
- 固定目标必须是侧边栏最外层容器（如
<div class="sidebar">），而非.col-md-3本身 -
.row和.container必须保留，否则响应式断点失效 - 右侧主内容区必须用
margin-left主动腾出空间，值应等于固定侧边栏的**实际渲染宽度**（含 padding/border），不能直接抄col-md-3的理论占比
fixed 定位下如何正确预留右侧内容空间
很多人写 margin-left: 25% 或 margin-left: 250px，结果在不同屏幕或字体缩放下错位。真正可靠的方式是：用 CSS 变量统一控制宽度，并让 margin 与之联动。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container">
<div class="row">
<div class="sidebar"></div>
<main class="content"></main>
</div>
</div>CSS：
:root {
--sidebar-width: 260px;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
max-height: calc(100vh - 2rem);
overflow-y: auto;
z-index: 1150;
}
.content {
margin-left: var(--sidebar-width);
}这样改一个变量就能同步两侧，也方便后续媒体查询中覆盖（比如移动端设为 --sidebar-width: 0）。
fixed 侧边栏滚动时内容被截断或无法滚动
现象：菜单项一长就溢出视口，拖不到底部；或者整个页面滚动条消失，只能看到顶部几行。
根本原因是 height: 100vh 没考虑顶部 navbar 高度，且未启用内部滚动。
- 必须加
max-height: calc(100vh - [navbar高度])，例如 navbar 是 4rem，则写max-height: calc(100vh - 4rem) - 必须显式声明
overflow-y: auto，否则子元素超出也不触发滚动条 - 避免对
.sidebar设overflow: hidden—— 它会吞掉滚动能力
与 Bootstrap navbar 或 offcanvas 共存时 z-index 和 transform 冲突
Bootstrap 5 的 .navbar.sticky-top 默认 z-index: 1030，.offcanvas 是 1140；若侧边栏 z-index ≤ 这些值，就会被盖住。
更隐蔽的问题是：offcanvas 启用时会对其父容器加 transform: translateX()，这会创建新的层叠上下文，导致其内部所有 position: sticky 失效 —— 即使你没把侧边栏放 inside offcanvas，只要 DOM 在同一 transform 树里，就可能被影响。
排查路径：
- 用浏览器开发者工具检查侧边栏计算后的
z-index和transform状态 - 确保侧边栏的父级（直到
<body>）没有transform、will-change、filter等会创建新层叠上下文的样式 - 若必须共存，把
.sidebar移到<body>直接子级，绕过所有组件的 transform 影响
真正麻烦的从来不是写 position: fixed 这一行，而是它像一把剪刀——剪开了原本由 Bootstrap 自动维护的布局契约，之后每一处留白、高度、层级、响应式切换，都得你亲手缝回去。
