CSS: 进度条，第二个背景出现在进度条下方而不是重叠

Question

我正在尝试创建一个进度条。如果用户完成了 20%，将创建一个具有我设置的颜色且宽度正确的条。但是由于某种原因，它出现在我的进度条下方而不是重叠，我不知道为什么。

奖金问题：为什么文本没有居中对齐？

CSS:

.progress-bar {
    height: 20px;
    width: 126px;
    background: #BABABA;
    position: relative;
}

.progress-bar span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    position: relative;
}

.progress-bar div.bar {
    height: 20px;
    background: #336291;
    position: absolute;
}

EJS:

<td>
                        <div class="progress-bar">
                            <span><%= gamedata[i].progressPercentage %></span>
                            <div class="bar" style="width:<%= gamedata[i].progressPercentage %>;"></div>
                        </div>
                    </td>

Answer 1

您应该输入正确的坐标，因此附加以下行：

.progress-bar div.bar {
    /* your code here */

    top: 0;
    left: 0;
}

奖励答案： 您的文本居中对齐，但您的 DOM 元素不是。我建议做的是提供自动横向边距并将其视为一个块，如下所示：

.progress-bar span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 15px;
    display: block;
    margin: auto;
    position: relative;
}

Answer 2

试试这段代码，没什么大的变化。 css 和 HTML 中的一些小变化。

.progress-bar {
        height: 20px;
        width: 126px;
        background: #BABABA;
        position: relative;
    }
    
    .progress-bar span {
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 15px;
        text-align: center;
        position: relative;
    }
    
    .progress-bar div.bar {
        height: 20px;
        background: #336291;
        position: absolute;
    }

听说是html代码：

<td>
   <div class="progress-bar">
      <div class="bar" style="width:<%= gamedata[i].progressPercentage %>;">
          <center><%= gamedata[i].progressPercentage %></center>
      </div>
  </div>
</td>

CSS: 进度条，第二个背景出现在进度条下方而不是重叠

CSS: Progress bar, second background is appearing below bar instead of overlapping

html

css

ejs

progress-bar