position: sticky 在 flex 布局中失效，因 flex 容器默认不创建滚动上下文；应改用 fixed 定位或确保父容器有明确高度和 overflow-y: scroll，并避免 transform 等干扰属性。
position: sticky 侧边栏在 flex 布局中不生效？
常见现象是：给 aside 或侧边栏容器设了 position: sticky 和 top: 0，但在 display: flex 的父容器里完全不动。根本原因是 sticky 需要「最近的滚动祖先」提供滚动上下文，而 flex 容器默认 overflow: visible，不会创建新的块格式化上下文（BFC），更不会变成滚动容器。
解决思路不是强行加 overflow: auto（会多出滚动条），而是让侧边栏的「滚动锚点」落在它真正该响应的容器上——通常是整个视口或某个明确的高度受限容器。
- 若希望侧边栏随页面滚动吸附顶部，
sticky应作用在脱离 flex 主轴限制的位置，比如把侧边栏和主内容用display: grid或绝对定位分离 - 若必须用
flex，则需确保其父容器有明确高度且设置了overflow-y: scroll，同时侧边栏自身不能触发最小尺寸收缩（加flex-shrink: 0） -
sticky元素的祖先中，任意一个设置了transform、perspective或filter，都会导致 sticky 失效 —— 这点常被忽略
flex + position: fixed 实现真固定侧边栏
当需要侧边栏完全脱离文档流、始终贴着视口边缘（比如左/右固定导航），position: fixed 更可靠。但和 flex 混用时，要注意它不再参与 flex 排列，主内容区域必须手动避开固定区域。
典型做法是：侧边栏用 fixed 定位，主内容用 margin-left（或 padding-left）腾出空间；如果主内容本身是 flex 容器，这个 margin 必须加在它的直接父元素上，而不是 flex item 内部。
立即学习“前端免费学习笔记（深入）”；
- 固定侧边栏宽度需明确（如
width: 240px），否则left: 0后无法推算主内容偏移量 - 避免对
fixed元素设置flex相关属性（如flex-grow），它们会被忽略 - 移动端需额外处理：
fixed在 iOS Safari 中可能因缩放或输入框弹起导致错位，建议加will-change: transform提前启用硬件加速
滚动内容区与固定侧边栏的协同高度控制
侧边栏固定后，主内容区若需独立滚动（比如长列表+固定操作栏），就不能依赖整个页面滚动，而要让内容区自己可滚动。此时关键在高度计算链是否断裂。
常见错误是给主内容容器设 height: 100%，但它的父级没有显式高度，导致最终计算为 0。正确方式是用 calc(100vh - Xpx) 或 flex 的自动伸展能力。
html...
css
.layout {
display: flex;
height: 100vh; /* 必须有明确高度 */
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
}
.content {
margin-left: 240px;
overflow-y: auto;
flex: 1; /* 此时 flex: 1 才有效，因为父级 height 已定 */
}
- 不要对
.sidebar使用flex属性，它已脱离布局流 -
.content的flex: 1依赖于.layout的height: 100vh，缺一不可 - 若页面有 header/footer，用
calc(100vh - 60px - 44px)替代100vh，并确保这些区域也脱离文档流或参与 flex 分配
sticky 与 fixed 在响应式中的取舍
桌面端适合 fixed 保证强固定，但小屏下往往需要侧边栏收起（如汉堡菜单），此时 sticky 反而更灵活——它只在滚动到阈值时才吸附，未触发前仍属文档流，便于用 display: none 或 transform: translateX(-100%) 控制显隐。
- 媒体查询中切换定位方式时，注意过渡动画：从
sticky切到fixed会跳变，建议统一用transform+fixed模拟粘性效果 -
sticky的兼容性较好（Chrome 56+/Firefox 59+/Safari 13.1+），但 IE 完全不支持，如需兼容，fixed是唯一选择 - 真正容易被忽略的是：无论用哪种方案，侧边栏内部内容若高度超出视口，且未设
overflow-y: auto，会导致内容被截断且无滚动条——这比定位失效更难排查
