如何使HTML页面中的hr元素在滚动时保持固定位置？

要让<hr>元素不受image-container滚动影响、始终固定在指定位置，可通过CSS定位实现，具体操作如下：

1. 设置父容器定位基准 #

给details类的Col容器添加相对定位，作为内部绝对定位元素的参考容器：

.details {
  position: relative;
  /* 可选：设置容器高度，避免内容溢出容器范围 */
  height: 100%;
}

2. 固定hr的位置 #

将<hr>设置为绝对定位，固定在details容器的指定位置（若下方有横幅，需调整bottom值为横幅高度），同时确保宽度撑满容器：

.details hr {
  position: absolute;
  bottom: 60px; /* 假设横幅高度为60px，根据实际情况修改 */
  left: 0;
  width: 100%;
  margin: 0;
  /* 可选：自定义分隔线样式 */
  border-top: 1px solid #ddd;
}

3. 避免滚动内容被遮挡 #

给image-container添加底部内边距，值等于hr高度加横幅高度，防止内容滚动到底部时被固定元素遮挡：

.image-container {
  overflow-y: auto; /* 开启垂直滚动 */
  padding-bottom: 80px; /* 示例值：hr高度20px + 横幅高度60px，按需调整 */
  /* 可选：设置容器最大高度，触发滚动行为 */
  max-height: calc(100vh - 100px);
}

4. 同步固定横幅（若需） #

如果下方横幅也需要固定，给横幅容器添加绝对定位：

.details .banner-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 横幅高度 */
  /* 自定义横幅样式 */
  background-color: #f5f5f5;
}

调整后的HTML结构示例 #

优化横幅容器结构，方便定位控制：

<Col className="details">
  <div className="image-container">
    <!-- 原有图片内容保持不变 -->
  </div>
  <hr/>
  <div className="banner-container">
    <!-- 横幅内容 -->
  </div>
</Col>

核心原理 #

通过父容器details的relative定位，让hr和横幅容器以它为基准进行绝对定位，脱离文档流，从而不受image-container滚动影响；同时给image-container添加底部内边距，保证滚动内容的完整性。

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