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. Everyth

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

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

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.

Answer 4

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 5

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 6

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.