双栏布局悬浮固定需据主布局选方案：sticky须满足父容器有高度且无overflow截断、非表格标签；flex下右侧固定栏必用fixed+手动占位与z-index精控，禁混用sticky与fixed。
双栏布局中做悬浮固定，不能直接给侧边栏加 position: fixed 就完事——它会脱离 flex/grid 容器，导致宽度塌陷、响应式错乱、z-index 层叠失效。真正可行的方案取决于你用的是什么主布局，以及“悬浮”到底要固定在视口还是父容器内。
侧边栏用 position: sticky 失效？检查三个硬性条件
很多人写好 position: sticky; top: 0; 却没反应，基本逃不出这三类问题：
- 父容器设置了
overflow: hidden、overflow: auto或overflow: scroll——sticky 会被截断，直接不触发 - 侧边栏嵌套在
display: flex或display: grid的容器里，而该容器本身没有明确高度（比如靠内容撑开），浏览器无法判断“粘性临界点” - 用了表格相关标签（如
<td>、<code><tr>）包裹侧边栏，这些标签对 <code>sticky支持极差，Safari 和部分 Android WebView 会完全忽略验证方式：临时给父容器加
border: 1px solid red;和height: 600px;，再测试是否吸顶。如果好了，说明是高度或 overflow 问题。Flex 布局下右侧悬浮栏必须用
position: fixed+ 手动占位当主结构是
display: flex（比如左主内容 + 右侧边栏），且你希望侧边栏始终固定在视口右上区域（如客服按钮、工具面板），sticky不适用，只能用fixed，但必须同步处理两个副作用：立即学习“前端免费学习笔记（深入）”；
- 给右侧栏加
right: 24px; top: 50%; transform: translateY(-50%);实现垂直居中；IE11 不支持transform，得退回到top: 50%; margin-top: -28px;（假设高 56px） - 主内容区必须预留右侧空间：用
padding-right或margin-right补足侧边栏宽度 + 间距，否则窄屏下文字会贴到按钮背后 - 务必设
z-index（至少 1000），并确认没有祖先元素意外创建了新层叠上下文（比如带opacity 或 <code>will-change的父级）
滚动吸顶导航 + 右侧悬浮栏共存时的层级冲突
当顶部有
position: sticky导航，右侧又有position: fixed悬浮栏，常见问题不是“吸不了”，而是“吸了但被盖住”或“滚动时闪一下”：-
sticky导航的z-index必须低于右侧悬浮栏（比如导航用 900，悬浮栏用 1000），否则后者会被前者遮挡 - 不要给
body或html设overflow-x: hidden——这会导致fixed元素在横屏或缩放时偏移，尤其 iOS Safari - 如果右侧栏需要随页面滚动“半固定”（比如只在某段区域内悬浮），别硬套
fixed，改用position: absolute+ JS 监听scroll动态切换 class，配合getBoundingClientRect()判断是否进入目标区域
最易被忽略的一点：双栏布局中，
position: sticky和position: fixed不能混用在同一逻辑层级。要么全用 sticky（需严格满足父容器约束），要么 fixed + 手动占位 + z-index 精控——没有中间态。浏览器不会帮你“智能融合”两种定位行为。 - 给右侧栏加
