绝大多数情况下，position: sticky 更合适，因其天然支持滚动吸附、不脱离文档流、无需手动监听滚动；position: fixed 仅适用于全局悬浮按钮等特定场景，且存在移动端定位偏移等问题。
侧边栏用 position: fixed 还是 position: sticky？
绝大多数情况下，position: sticky 更合适。它天然支持“滚动到临界点才吸附”，不脱离文档流，不影响主内容宽度计算，也不需要手动处理滚动监听或 window.resize 重算位置。position: fixed 虽然稳定，但会脱离布局流，容易导致主内容区域宽度错乱（比如没留出侧边栏宽度），且在移动端常因 Safari 的 viewport 缩放行为出现定位偏移。
使用 sticky 的前提是父容器不能有 overflow: hidden|auto|scroll，否则吸附失效；同时需指定 top 或 bottom 值（如 top: 0）。
-
sticky适用于导航类侧边栏（如文档 TOC、管理后台菜单） -
fixed仅推荐用于全局悬浮操作按钮（如回到顶部）、或明确要求始终可见且不随主内容高度变化的场景 - 若需兼容 IE，
sticky不可用，必须降级为fixed+ JavaScript 监听scroll手动控制top
如何避免侧边栏遮挡主内容或导致水平滚动？
核心问题是：侧边栏默认不参与 flex/grid 布局宽度分配，又未显式预留空间。常见错误是只给侧边栏设 width: 240px，但主内容区域仍占满 100% 宽度，最终触发横向滚动条。
正确做法是让主内容区域主动“让出”侧边栏宽度。推荐用 display: flex 父容器统一控制：
立即学习“前端免费学习笔记（深入）”；
<div class="layout"> <aside class="sidebar">菜单</aside> <main class="content">正文</main> </div>
对应 CSS：
.layout {
display: flex;
}
.sidebar {
width: 240px;
flex-shrink: 0; /* 防止被压缩 */
}
.content {
flex: 1; /* 自动填满剩余空间 */
min-width: 0; /* 防止内容过长时溢出 */
}- 不用
float或绝对定位模拟布局——维护成本高，响应式困难 - 不要在
.content上写margin-left: 240px——flex 下该 margin 会被忽略，且无法响应父容器缩放 - 若侧边栏需隐藏/展开，优先用
transform: translateX()+overflow: hidden控制，而非直接改width或display，避免重排
移动端侧边栏收起后，如何确保点击 Overlay 能关闭？
这是交互中最容易漏掉的一环：Overlay 层存在，但没绑定事件，或事件绑定在错误节点上（比如绑在 却没阻止冒泡，导致点击侧边栏内部也触发关闭）。
关键点在于结构清晰、事件委托精准：
- Overlay 必须是独立元素，z-index 低于侧边栏但高于主内容（如
z-index: 99） - 关闭逻辑应监听 Overlay 的
click，并检查event.target === overlayEl，防止点击侧边栏内链接/按钮误关 - 用
classList.toggle()控制.sidebar.open类，配合 CSS 过渡动画（如transform: translateX(0)/translateX(-100%)）
示例 JS 片段：
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.overlay');
<p>overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
sidebar.classList.remove('open');
}
});为什么 Safari 下 position: sticky 侧边栏有时不动？
不是 bug，是 Safari 对 sticky 的实现限制：当祖先元素设置了 -webkit-overflow-scrolling: touch（iOS WebKit 旧特性）或 transform、perspective、filter 等合成层属性时，sticky 会失效。
排查顺序如下：
- 检查侧边栏所有父级是否含
transform（哪怕只是transform: translateZ(0)） - 检查是否有父级设置了
will-change: transform - 确认没有
body或html上的overflow: hidden（它会截断 sticky 的锚定范围） - 临时移除所有
-webkit-前缀样式验证是否由它们引发
临时修复方式：对 sticky 元素的最近一个“干净”父容器（无 transform/filter/overflow）显式设置 position: relative，可恢复部分场景下的吸附行为。
真正稳定的方案仍是放弃 sticky，在 iOS 上回退到 scroll 监听 + fixed 动态更新 top，但务必加节流（requestAnimationFrame 最佳）。
