Relative Positioning

[V1SHAL]

Hi all...

I'm trying to use relative positioning to position an image.

I have the following code:


<img src="images/copy_white.png" style='position:relative;top:0px;;left:405px;border:none;margin-top:-278px;margin-right:-10px;'>

As you can see I attempted to make a workaround by using negative margins. This this help some but there is still empty space where the image would go in normal flow.

Is this a regular occurance with relative positioning or am I doing something wrong? Any other workarounds?

[jscheuer1]

It is normal. Relative positioning doesn't take the element out of the flow of the document. It only shifts its position relative to where it otherwise would be. If you want to take the element out of the flow of the document, use absolute positioning. This will place the element absolutely on the page starting from 0,0 (the upper left corner of the page, which can be a hassle getting right for various sized windows, etc.). If you want to use a departure point from within the document, rather than to position absolutely on the entire page, you can use this sort of thing:


<div style="position:relative;height:0;width:0;overflow:visible;">
<img style="position:absolute;top:5px;left:300px;" src="some.gif">
</div>


The division will be in the flow of the page but takes up no layout space. The image will be in relation to the division's position and also takes no layout space.