html - 垂直 CSS 进度条

Question

我正在致力于创建一个仅使用 HTML 和 CSS 自下而上的进度表。我面临的问题是叠加图像没有在它所属的位置排列。有人可以帮帮我吗？

编辑

代码如下:

<h2>Fall Fest Candy Collection</h2>
<p>The Fall Fest candy collection has begun!  Follow along with the progress bar as we attempt to reach our goal of one million pieces of candy!</p>
<p>&nbsp;</p>
<div id="progress-bar">
<div id="progress-level" style="height: 79%; bottom: 0px; text-align: center;"></div>
</div>
<p style="margin-bottom: 15px; text-align: center;">79% collected</p>
<p> </p>

Answer 1

• 在 #progress-bar 上，设置 position: relative。
• 在 #progress-level 上，删除 margin-top: 133px 并添加 bottom: 0。然后，将 height 更改为一个更大的数字，比如 50%，这样您就可以看到它正在运行。