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。实现这一目标的正确方法是什么？

Answer 1

您需要的是使文本的行为与您的 .stats-progress-container 相关。

您可以通过将 position: relative 添加到该容器 div 来实现。
.stats-label 标签的绝对位置值将查找具有相对位置的第一个父级（如果有）

然后，您可以再次将文本调整为以该 div 为中心，但我认为您可以自己解决这个问题。（我在代码段中对其进行了调整，它与 top 属性有关）

有关位置相对的更多信息，请参阅w3Schools

.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;
  position: relative; /* YOUR FIX */
  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: 6px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 6px;
  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>

Answer 2

.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;
  position: relative;
}

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

.stats-label {
position: absolute;
    z-index: 1;
    font-size: 12px;
    left: 16px;
    color: #606060;
    background-color: transparent;
    top: 50%;
    transform: translateY(-50%);
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 50%;
    transform: translateY(-50%);
  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>

没关系

Answer 3

您没有将 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>

Answer 4

将 position: relative; 添加到 .stats-progress-container。这将使 absolute 位置相对于该元素。

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

4 个答案: