樣式表「DIV溢出」 - 當我運行滾動，的div遵循

Question

我制定了以下接口的議案：

一切似乎是好了... ...但是，當我們推出我們的滾動條，我們有以下的情況：

的聊天的「用戶」，伴隨着滾動的名字被風格化與固定位置position:absolute;。 我嘗試了一些修復，但無濟於事！你們可以看到的jsfiddle Here.

li > span.frdName { 
    position:absolute; 
    float:left; 
    margin-top:10px; 
    font-weight: bold; 
    font-family:'Verdana', cursive; 
    font-size: 15px; 
    color: white; 
    margin-right:200px; 
    width: 200px; 
} 

可能有人給我與力的問題？還是更好的方法呢？

Answer 1

問題是，li > span.frdName有position:absolute，所以它將被絕對定位與其相關的"positioned parent";

而且由於position風格的最近父母是div#chat-master,span.frdName將與其相關。

爲了解決這個問題，你可以添加一個position風格的li：

#navlist li { 
    /* 
    * ...... 
    * original style 
    */ 
    position:relative; 
} 

Fixed demo

現在span將根據li定位，因此它滾動。