Я пытаюсь создать индикатор выполнения с HTML.Вот что у меня есть:
<div style="position: relative;">
<span id="statslbg" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 20px; background-color: #AAAAAA; display: block;"></span>
<span id="statslbar" style="position: absolute; top: 0px; left: 0px; display: block; height: 20px; width: 0px; background-color: #99ccff"></span>
<span id="statsltext" style="position: absolute; top: 0px; left: 0px; display: block; height: 20px; width: 300px; font-size: 14px; line-height: 20px;"></span>
</div>
Первый диапазон - это фон, второй - фактический прогресс (ширина изменяется с помощью JavaScript позже), а третий - текст в верхней части панели.(также изменилось позже с помощью javascript).
Я хочу, чтобы все они перекрывались, поэтому я установил их все абсолютные позиции относительно 0, 0 относительно их контейнера.
Моя единственная проблема - сам контейнер несохраняя нормальный поток страницы.Если я использую положение static на div, оно переходит в верхний левый угол моего окна, если я использую относительное, оно отрисовывает, где оно должно отображаться, но другие элементы, кажется, обрабатывают его так, как если бы его ширина и высота были 0x0.
Как заставить мои элементы перекрываться, чтобы создать индикатор выполнения, но при этом сохранить нормальный поток страницы?