首选position: fixed，因其不依赖父容器滚动上下文，只需设top/left、显式宽高及主内容对应margin；sticky仅适用于需随父容器滚动阶段性吸附的场景，且须满足父容器有高度约束、侧边栏为直接子元素、显式top值、无transform等干扰属性。

直接用 position: fixed 是最稳的方案，别被“悬挂”“吸附”这类词带偏——侧边栏要真固定在视口边缘，sticky 在多数侧边场景下根本不可靠，容易失效且行为难控。

为什么 position: fixed 是首选

它不依赖父容器高度、滚动上下文或层叠环境，只要设对 top 和 left（或 right），就能钉死在视口边缘：

• left: 0 + top: 0 → 左上角起点；若顶部有导航栏，改用 top: 64px（按实际高度调整）
• 必须显式写 width（如 width: 260px），否则默认收缩为内容宽，视觉上像“没挂住”
• 主内容区得主动让位：用 margin-left: 260px（左侧栏）或 margin-right: 260px（右侧栏），数值必须严格匹配侧边栏宽度
• 移动端必须加媒体查询，把 fixed 切成 static 或配合 display: none，否则 iOS Safari 会出现滚动卡顿或缩放异常

position: sticky 什么情况下能用

仅当你要的是“随父容器滚动而阶段性吸附”，比如网格中每行配一个侧边栏，且希望它只在本行可见时才贴顶——这时 sticky 才有意义：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 父容器（如 <section></section>）必须有明确高度约束，例如 min-height: 100vh 或 height: fit-content
• 侧边栏自身必须是该容器的**直接子元素**，中间不能套一层无样式的 <div> <li>必须写 <code>top: 16px（不能是 top: auto），否则不触发粘性
• 父容器或祖先元素不能有 transform、filter、will-change、overflow: hidden，这些会切断 sticky 的滚动上下文
• IE11 完全不支持，需降级到 fixed + JS 监听 scroll

Flex 布局下假装“悬挂”的实用替代法

如果你在意语义、打印样式或 SEO，不想让侧边栏脱离文档流，就别硬上 fixed 或 sticky，改用 Flex 视觉模拟：

立即学习“前端免费学习笔记（深入）”；

• 外层容器设 display: flex，侧边栏加 flex: 0 0 260px（禁止缩放+固定宽）
• 主内容区用 flex: 1 自适应剩余空间，无需手动算 margin
• 侧边栏内部加 max-height: 100vh + overflow-y: auto 实现局部滚动，不影响主内容全局滚动
• 这种布局天然响应式：小屏时用媒体查询把 flex-direction: column，侧边栏自动跑到上面

真正容易被忽略的是：所有方案都绕不开“主内容让位”这个动作。很多人只顾着调侧边栏，忘了给正文留空间，结果内容一半被盖住——这不是 CSS 不行，是布局逻辑断在了最基础的一环。