如何将<hr>水平线移动到div容器内标题文本的下方位置？

• hr样式仅设置了bottom属性，但没有给该元素指定定位模式：元素默认是静态定位，所有top/bottom/left/right偏移属性对静态定位元素完全无效，之前调整vh单位、修改margin没有效果，核心原因就在这里。
• 其余所有文字类元素用vh单位做定位参考，基于的是浏览器视口尺寸而非卡片容器本身的尺寸，一旦视口高度变化，所有元素位置就会错位，根本无法精准对齐到预期位置。
• 不需要专门为hr新建独立div包裹，修正现有定位逻辑就能达到预期效果。

1. 修正hr的样式，让偏移属性正常生效：

hr {
  /* 补全定位属性，bottom值才会被识别生效 */
  position: absolute;
  border-top: 1px solid #969696;
  /* 容器左右各有50px内边距，100%宽度会超出容器内边界，计算后对齐实际可用宽度 */
  width: calc(100% - 100px);
  left: 50px;
  /* 直接基于容器尺寸计算偏移，替换之前不准的vh值 */
  bottom: 70px;
  /* 清除hr默认的上下外边距，避免意外位置偏移 */
  margin: 0;
}

2. 将其余文字元素的vh定位全部替换为基于父容器的偏移值，避免位置漂移：

.user-name {
  position: absolute;
  left: 50%;
  transform: translateX(-70%);
  top: 180px;
  /* 原有字体、颜色、字重样式全部保留即可 */
}

.user-age {
  position: absolute;
  left: 65%;
  top: 180px;
  /* 原有字体、颜色、字重样式全部保留即可 */
}

.user-location {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
  /* 原有字体、颜色、字重样式全部保留即可 */
}

3. 将和hr挤在同一行的统计文本单独拆分排版，避免和水平条重叠：

<div class="topcon">
  <img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
  <img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
  <p class="user-name">Victor Crest</p>
  <p class="user-age">26</p>
  <p class="user-location">London</p>
  <hr />
  <div class="stats">
    <span>80K<br>Followers</span>
    <span>803K<br>Likes</span>
    <span>1.4K<br>Photos</span>
  </div>
</div>

注意：所有调整失效的本质，是没有给元素设置对应定位类型就直接写偏移值，不是单位选择错误，也不是缺少包裹hr的独立容器。

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