Positioning help, need ideas

Z-index, reserved space

[keylime]

(edit: sorry about the double post, not sure how to delete messages!)

Hi,

I am trying to put a couple of images outside of the layout of my webpage. My page consists of of a centered table with content using css.

Right now I am just using a transparent picture of a ball (png) to test if I can do this but it has not been working out. When I use absolute positioning, it looks ok when the window is maximized... but when the user resizes the window the page content moves independently of the overlapping ball image (z-index of 2).

So obviously I need to use relative positioning so that when the window is resized everything moves the same relative to the window. However, when I place the ball image off to the side the content of my web page is altered a little bit because it leaves the space reserved for where the image is supposed to be.

What I want seems to be a combination of absolute and relative positioning... I want the 'no reserved space' aspect of absolute positioning combined with the 'move with the flow of the page' aspect of relative positioning... Is this possible?

[CSS_Kidd]

Actually, you are probably using px to position the absolute element right? Just change it to a percentage and it should move with everything else.

Post your html and css.

[keylime]

[edit: I tried changing everything to percentages but that only seems to work until a certain point in resizing the window. After that point the content moves independently of the image.]

After trouble shooting for a while I think I came up with a solution, which seems to be sort of what I suggested in my original post. I combined the absolute and relative elements like so:

CSS:

.ball
{
position:relative;
}

HTML:

<div class="ball">
<img src ="ball.png" width="45" height="40"style="position:absolute;top:50%;left:-45px;right:0%;z-index:2"/>
</div>

Now the image moves with the flow of the page, but doesn't leave that big empty space where the image "should be".

I guess the only problem I still have is that when resizing the window, the ball image is not acknowledged as part of the page and the user cannot scroll to the side to see it (treated sort of like a background image)... but I guess its not a big deal. Maybe there is a way to give the image a defined 'invisible width' so that the scroll bar shows up? This way when the window is resized the user can scroll to the side to see the image instead of it being left out of the viewable resized window. Everything I just typed probably doesnt make sense haha... oh well.