我正在尝试使用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。
我唯一的问题是容器本身无法保持页面的正常流动。如果我在div上使用位置静态，它将转到窗口的左上角；如果使用相对位置，则会在应渲染的位置进行渲染，但是其他元素似乎将其视为宽度和高度为0x0。
如何使元素重叠以创建进度条，又如何保持页面的正常流动？