Css 'div overflow ' - 当我运行滚动时，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 将定位到它。

要解决这个问题，可以在li中添加一个position样式:

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

Fixed demo

现在 span 将根据 li 进行定位，从而随之滚动。