How To Set Relative Position without taking up space

Using relative position in CSS is great; however, the downside of using relative positioning with images is that you still end up with the image taking up that space on your page. The block where the image should be will be taken up and if you want other content to play by the relative rules, you'd have to set each element after that to relative.

Well, I found a little trick that will allow you to place an image in relative position without taking up a block space.

All that is required is to put your relative image in an absolute positioned div. As Follows:

<div style="position: absolute; top: 0px; left: 0px; width: 100%; text-align: center;">
    <img style="position: relative; top: 300px; left: 20px;" src="image_url.png" alt="" />
</div>

In the above example the image will be placed 300 pixels down the page and 20 pixels left of the center.

Explanation: The div will position the element to the top left of any page and it will align the element to the center . Now you can specify how far down the page and how far from the center, left or right, you would like to display your image.

Hope this helps prevent a future headache for anyone :)