Div with scroll and content with absolute positions

Question

I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.

Wrap everything in a containing div that is positioned relatively on the page:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
    <br />
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
    <br />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
        <br />[scrolling content]<br />
    </div>
    <br />
</div>

Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>

Try float:left or float:right with margin

I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.

And a simple solution is using float.

my old code was-

position:absolute; right:10px;

and I replaced with the following and it worked-

float:right; margin-right:10px;