Search code examples
csshtmlpositionalignmentoverflow

Css 'div overflow '- When I run the scroll, the divs follow the motion

I developed the following interface :

Before Scroll

Everything seems to be okay ... but when we roll our scroll bar, we have the following situation:

After Scroll

The names of the "users" of the chat, accompanying scroll, being styled with fixed position position:absolute;. I tried some fixes but to no avail! you guys can see the problem this 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;
}

Could someone give me a force with that? Or a better way to do?

Solution

  • The problem is that, li > span.frdName has position:absolute, so it will be absolutely positioned related to its "positioned parent";

    And because the nearest parent that has position style is div#chat-master, span.frdName will positioned related to it.

    To solve this, you can add a position style to the li:

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

    Fixed demo

    Now the span will be positioned according to li, thus scroll with it.