如何用CSS在滚动条出现时自动调整相对定位关闭按钮的位置

方案1：使用sticky定位（推荐，无需提前预留滚动条空间） #

关闭按钮不要用absolute/relative定位相对于父容器，改用sticky定位，自动跟随内容视口边界调整位置，滚动条出现时会自动避开：

/* 日志容器样式 */
.log-wrapper {
  overflow-y: auto;
  height: 300px; /* 可替换为自己设置的容器高度 */
  border: 1px solid #eee;
}

/* 关闭按钮样式 */
.close-btn {
  position: sticky;
  float: right;
  top: 10px; /* 距离顶部的距离，可自定义 */
  margin-right: 10px; /* 距离右侧内容边界的距离，可自定义 */
  z-index: 10; /* 保证按钮在日志内容上层 */
  /* 其他按钮样式如宽高、背景、交互样式自行补充即可 */
}

注意：使用该方案时，需要把关闭按钮作为日志容器的第一个直接子元素，放在日志内容的前面。
原理：sticky定位的元素的水平位置是相对于滚动容器的内容视口计算的，滚动条出现时内容视口宽度会自动减去滚动条宽度，按钮会自动向左偏移对应距离，不会和滚动条重叠。没有滚动条时按钮会贴在容器最右侧，不会留多余空隙。

方案2：使用scrollbar-gutter属性（实现最简单，适合接受提前预留滚动条位置的场景） #

如果可以接受滚动条未出现时右侧也预留对应宽度的槽位，直接给日志容器加scrollbar-gutter属性即可：

.log-wrapper {
  overflow-y: auto;
  height: 300px;
  scrollbar-gutter: stable; /* 固定预留滚动条槽位，滚动条显隐都不会改变内容宽度 */
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

如果希望滚动条不出现时不预留槽位，可以把scrollbar-gutter的值改为stable both-edges，或者配合容器的padding调整即可。

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