position: sticky 失效主因是父容器触发层叠上下文或滚动链断裂，须嵌套 .sidebar-sticky 并设 height: fit-content、align-self: flex-start，降级用 @supports + fixed。
position: sticky 能实现侧边栏滚动停靠，但不是加在 .col 或 .sidebar 根元素上就自动生效——它对父容器、层叠上下文和尺寸约束极其敏感，稍有偏差就退化为 relative。
为什么直接给 .sidebar 加 position: sticky 会失效
常见现象：样式写了 position: sticky; top: 1rem;，但侧边栏仍随页面滚动，DevTools 里 Computed 面板显示 position: relative。根本原因不是浏览器不支持，而是：
- 侧边栏的**直接父容器**（比如 Bootstrap 的
.row或自定义.layout）设置了overflow: hidden、overflow: clip或transform—— 这些都会切断滚动祖先链，sticky 失去锚点 - 父容器是
display: flex且未设height或max-height，同时overflow-y是默认的visible，导致没有可滚动边界 - 任意祖先元素用了
filter、perspective或will-change，隐式创建新层叠上下文，sticky 被禁用 - iOS Safari ≤ 15.4 对 flex 容器内
left: 0支持极差，水平方向 sticky 基本不可靠
必须嵌套一层 sticky 容器，且设 height: fit-content
别把 position: sticky 直接写在栅格列或语义化容器上。正确结构是：
<div class="col-md-3">
<div class="sidebar-sticky">
<div class="sidebar-content">...</div>
</div>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
-
.sidebar-sticky设position: -webkit-sticky; position: sticky; top: 1rem; - 必须加
height: fit-content—— 否则若内部有height: 100%的子项，会反向撑开父级，破坏 sticky 的临界点计算 - 若侧边栏内容由 JS 动态展开/收起，DOM 更新后需触发重排：
getComputedStyle(el).transform或临时设el.style.minHeight = 'auto'再清空
Flex 布局中侧边栏被拉伸导致 top 偏移失效
Flex 容器默认 align-items: stretch，若侧边栏未显式声明 align-self: flex-start，它会被拉伸到与主内容等高，导致 top 偏移量从“视口顶部”变成“拉伸后的顶部”，粘性起点错位。
- 给
.sidebar-sticky加align-self: flex-start（如果它在 flex 容器中直系子元素） - 避免在
.col-md-3上设height: 100%或min-height: 100vh，这会让 flex 拉伸行为更难控制 - 主内容区用
flex: 1占剩余空间，侧边栏用flex: 0 0 auto，防止缩放干扰高度
响应式下 sticky 失效或遮挡内容的兜底处理
移动端小屏强行启用 sticky 容易误触、遮挡正文，且 iOS Safari 在某些机型上仍有定位偏移 bug。不要依赖单一方案：
- 用
@supports (position: sticky)包裹 sticky 样式，并在不支持时降级为position: fixed -
fixed方案必须写全四要素：top: 0、left: 0、width: 250px、height: 100vh（100%会塌） - 主内容区配
margin-left: 250px（值严格等于侧边栏宽度），padding-left不起作用 - 侧边栏自身加
overflow-y: auto; max-height: calc(100vh - 2rem)，否则长菜单无法滚动
最易忽略的是断点切换时的 z-index 冲突和父容器 overflow 意外继承——真机测试比 DevTools 模拟器更能暴露问题。
