浮动的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; 
}