Div with scroll and content with absolute positions

Question

I have a "div" with style: overflow-y: scroll; overflow-x: auto; overflow-y: scroll; overflow-x: auto; I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine. Is there any solutions for this?

EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.

Answer 1

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.

Answer 2

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>

Answer 3

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>

Answer 4

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;

Answer 5

You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.

Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>

Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com

For a good tutorial on DIV positioning with CSS go to:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Cheers

Answer 6

你知道吗，将绝对定位元素包装在一个相对定位的容器元素中可能更容易，我认为应该能够滚动...

Answer 7

事情我学到了很多东西：对于IE6 / IE7，它可能需要将图像作为包含DIV中的最后一个DOM元素，以使其在滚动DIV上显示。

Answer 8

The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.