横向滚动容器内absolute定位按钮不跟随滚动问题求解

问题原因 #

position: absolute方案失效的核心逻辑：设置了overflow: auto的相对定位容器，其绝对定位子元素的定位参考是容器的可视区域（即设置的100vw宽可见视口部分），而非容器内部可滚动的总内容宽度，因此按钮会固定悬浮在可视区右上角，不会跟随内容横向滚动。float: right的浮动参考同样是容器可视宽度，无法匹配滚动内容的实际宽度，因此也不生效。

实现代码 #

不需要复杂的定位计算，直接让按钮进入横向文档流即可，完美适配任意数量的文章场景：

.container {
  width: 100vw;
  overflow: auto;
  white-space: nowrap;
  font-size: 0; /* 消除inline-block元素间的默认空白间隙 */
}

.article {
  display: inline-block;
  /* 以下为文章原有样式，可按实际需求调整 */
  width: 320px;
  height: 600px;
  margin-right: 16px;
  background: #f0f2f5;
  font-size: 16px; /* 容器设置了font-size:0，此处需重置为正常字号 */
  vertical-align: top;
}

button {
  /* 移除原有绝对定位相关的所有属性 */
  display: inline-block;
  vertical-align: top;
  margin-top: 10px; /* 对应原top:10px的顶部间距 */
  margin-right: 20px; /* 对应原right:20px的右侧间距 */
}

对应的HTML结构调整为：

<div class="container">
  <div class="article">第一篇文章内容</div>
  <div class="article">第二篇文章内容</div>
  <div class="article">第三篇文章内容</div>
  <!-- 按钮放在所有文章末尾，与文章同级 -->
  <button>保存</button>
</div>

实现逻辑说明 #

• 利用容器white-space: nowrap的特性，所有设置为inline-block的子元素会自动横向排列不换行，按钮放在所有文章的末尾，自然紧贴最后一篇文章的右侧
• 按钮属于正常文档流内容，横向滚动时会和文章一起移动，只有滚动到容器最右侧时才会出现在视口的右上角，不会出现悬浮固定的问题
• 该方案不需要JS动态计算内容宽度，纯CSS实现，兼容性覆盖所有主流浏览器

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