当窗口宽度减小时，浮动DIV，右浮动div与左div重叠

Question

这是我想要做的一个例子（下面）。请参阅状态栏，并注意当窗口大小减小时进度条与左侧文本重叠的方式。我试图这样做，但是当窗口大小足够小时，右浮动的div只会切断（在右侧）。

Answer 1

我会使用absolute定位和z-index。 See my example.

<div id="c">
    <div id="l">Some text that would get cut off</div>
    <div id="r">Some text that would cuts off left</div>
</div>

#c
{
    height: 100px;
    background-color: #ccc;
    position: relative;
}
#l
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 15px;
    background-color: red;
    z-index: 1;
}
#r
{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 15px;
    background-color: green;
    z-index: 2;
}