Вертикальный индикатор выполнения 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%, чтобы вы могли видеть, как оно работает.

Answer 2

Я исправил с помощью:

<div id="progress-level" style="height: 7%; margin-top: 76px; text-align: center;"></div>

Изменено верхнее поле до 76px. Это было в инструментах разработчика Chrome.

Answer 3

Я бы попробовал использовать position: относительные и bottom свойства, чтобы поднять # уровень прогресса вверх, но я не могу попробовать это сейчас, я на мобильном устройстве;-).