Html CSS：进度条，第二个背景显示在进度条下方，而不是重叠

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

额外的问题：你知道为什么文本没有对齐到中心吗

CSS:

EJS:

---

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

.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;
}

---

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

.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;
}

---

试试这段代码，没什么大的变化。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;
    }

Hear是

html

code:

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

---

试试这段代码，没什么大的变化。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;
    }

Hear是

html

code:

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

未看到奖金答案，将稍后再试。我现在也必须让它可读，第二栏的颜色隐藏了文本。没有看到额外的答案，稍后再试。我现在也必须让它可读，第二条的颜色隐藏了文本。