html - 如何将一个 div 设置为始终位于另一个 div 之上

Question

我是 CSS 和 HTML 的初学者。这就是我想要实现的，在进度顶部带有文本标签的进度条。文本的位置是固定的，名称总是在最左边，单位总是在最右边。我需要这个进度条的多个副本。

我只需一份副本就可以实现正确的布局。

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
  </div>
</div>

---

但是，如果我复制一组 div 的副本，结果会变成这样。

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Humidity</div>
      <div class="stats-unit">50</div>
    </div>
  </div>
</div>

因此，我必须将top文本样式的值更改为 48px 左右才能获得正确的结果。但这不是一个好的解决方案，因为我要显示的进度条数量是动态的。

我不明白为什么第二个文本副本的 x 和 y 位置与第一个副本相同？我的意思是它们属于不同的父 div。我认为绝对定位将仅相对于其父 div。实现这一目标的正确方法是什么？

标签： htmlcss

Answer 1

1. 您没有将Position Relative应用于容器。

此类position问题的最佳解决方案是将它们放在div.stats-progress-container( position relative) 中，然后应用position absolute. 然后你可以使用top right bottom left.

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  position: relative;
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 5px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 5px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
    <div class="stats-display-container">
        <div class="stats-progress-container">
            <div class="stats-progress"></div>
            <div class="stats-label">Temperature</div>
            <div class="stats-unit">80°C</div>
        </div>
        <div class="stats-progress-container">
            <div class="stats-progress"></div>
            <div class="stats-label">Humidity</div>
            <div class="stats-unit">50</div>
        </div>
    </div>
</div>