我正在尝试使用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>
第一个 Span 是背景，第二个是实际进度（宽度随后用javascript改变），第三个是条形顶部的文本（稍后用javascript更改） .
我希望它们全部重叠，所以我将它们的所有绝对位置相对于它们的容器相对0,0 .
我唯一的问题是容器本身不能保持页面的正常流动 . 如果我在div上使用position static，它会转到我窗口的左上角，如果我使用relative它会渲染它应该呈现的位置，但其他元素似乎将它视为宽度和高度为0x0 .
如何让我的元素重叠以创建进度条，还能保持页面的正常流程？