当页面滚动后，绝对定位的菜单脱离父元素偏移，根本原因是缺少相对定位的上下文；只需为祖先容器（如 .row）添加 position: relative，即可使 position: absolute 的菜单始终以其为参考系精准定位。

当页面滚动后，绝对定位的菜单脱离父元素偏移，根本原因是缺少相对定位的上下文；只需为祖先容器（如 `.row`）添加 `position: relative`，即可使 `position: absolute` 的菜单始终以其为参考系精准定位。

在 CSS 定位模型中，position: absolute 元素的定位基准并非文档流中的“视觉父级”，而是最近的、非 static 定位的祖先元素（即设置了 relative、absolute、fixed 或 sticky 的祖先）。若所有祖先均为默认 static，则该元素将相对于 （即视口）定位——这正是滚动后菜单位置“漂移”的根源。

在你的代码中，.menu 直接嵌套在 .row 内，但 .row 缺少 position: relative 声明，导致 .menu 实际以 或 为参考定位。一旦 .layout 滚动，.row 的视口坐标变化，而 .menu 的 left: 0; right: 0; margin: auto 计算仍基于整个视口宽度，因此无法随 .row 一起滚动，出现错位。

✅ 正确解法：为 .row 添加 position: relative：

.row {
  height: 50px;
  width: 100%;
  border: solid 1px #a5a5a5;
  cursor: pointer;
  color: red;
  position: relative; /* ? 关键修复：建立定位上下文 */
}

此时 .menu 将严格以 .row 的内容盒（content box）左上角为原点进行绝对定位。配合 left: 0; right: 0; margin: auto，它会水平居中于 .row 宽度内，且随 .row 在滚动容器中移动而同步定位，彻底解决滚动偏移问题。

JVS Claw

一款AI工具，主要用于阿里云“养虾”神器，一键接入OpenClaw，云上安全“养虾”，适合需要提升相关任务效率的用户。

下载

⚠️ 注意事项：

• 不要对 .menu 设置 top（除非需要垂直偏移），否则可能遮挡文本内容；如需下拉效果，建议显式设置 top: 100% 或 bottom: -100%；
• 确保 .menu 的 z-index 足够高，避免被其他元素遮盖；
• 若 .row 内有 padding 或 border，position: relative 仍以 content box 为定位基准，无需额外调整；
• 避免在 .layout 上设置 transform 或 will-change（除非必要），因其会创建新的层叠上下文和包含块，干扰定位行为。

总结：CSS 绝对定位的“锚点”由最近的非 static 祖先决定——这不是 bug，而是规范设计。主动为逻辑父容器设置 position: relative，是控制绝对定位行为最可靠、最轻量的实践方式。