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