Div with scroll and content with absolute positions

Question

I have a "div" with style: 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

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 2

I want to show this image in front of other element - textbox.

Answer 3

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 4

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.

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 (except with <> instead of []):

[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

You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...

Answer 7

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;">
    <img src="foo.gif" style="position:absolute;top:0;left:0;z-index:100" />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;z-index:10;display:block;position:relative;">
        [scrolling content]
    </div>
</div>

Answer 8

Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.