css - Css 'div overflow' - 当我运行滚动时，div 跟随动作

Question

我开发了以下界面：

一切似乎都很好......但是当我们滚动滚动条时，我们有以下情况：

聊天“用户”的名字，伴随滚动，固定位置样式position:absolute;。我尝试了一些修复，但无济于事！你们可以在这里看到这个 jsFiddle 的问题。

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.frdNamehas position:absolute，所以它将绝对定​​位与其“定位的父级”相关；

并且因为最近的具有position样式的父级是div#chat-master,span.frdName将定位与其相关。

为了解决这个问题，你可以添加一个position样式到li：

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

固定演示

现在span将根据 定位li，因此滚动它。