如何让滚动父容器内的absolute定位元素不随内容滚动？

你的问题核心是：.container 设置 overflow 后成为了滚动容器，内部的绝对定位元素会被限制在这个容器的滚动上下文里，随内容一起滚动。要让 .right 固定不滚动，有两种可行方案：

方案一：将元素移出滚动容器（推荐，兼容性好） #

把 .right 从 .container 中移出，给它们共同的父容器设置相对定位，让 .right 相对于父容器定位，这样就脱离了滚动容器的影响。

修改后的代码： #

<div class="container-wrapper">
  <div class="container">
    <p style="height: 200vh;">Long text to force scrollbars...</p>
  </div>
  <div class="right">
    Right should not scroll
  </div>
</div>

.container-wrapper {
  position: relative;
  /* 可选：根据布局需求设置宽度，比如占满父容器 */
  width: 100%;
}

.container {
  background: #eee;
  overflow-x: auto;
  height: 100px;
  /* 确保容器宽度撑满父容器 */
  width: 100%;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  /* 加背景色避免被滚动内容遮挡 */
  background: #fff;
  padding: 0 10px;
}

方案二：使用 sticky 定位（无需修改HTML） #

如果无法调整HTML结构，可以用 position: sticky，让 .right 相对于容器的可视区域固定。需要给 .container 启用弹性布局来配合sticky生效：

修改后的CSS： #

.container {
  background: #eee;
  position: relative;
  overflow-x: auto;
  height: 100px;
  /* 启用flex布局 */
  display: flex;
  flex-direction: column;
}

.right {
  position: sticky;
  top: 0;
  /* 靠右对齐 */
  align-self: flex-end;
  background: #fff;
  padding: 0 10px;
}

注意：sticky 定位在IE浏览器中不支持，如果需要兼容旧浏览器，优先选择方案一。

内容的提问来源于stack exchange，提问作者aslanks