help with position absolute

[suavedesign]

I have an img on my site that I want to be positioned absolute. The problem is that it jumps around when the screen is resized. I made the container div have

position:relative;

so I don't know why this is happening.
This is the url to my site: http://www.windowsauction.org/
The image on top that I want to be positioned absolute is a logo, and it's called "tag_logo.png". It's on a php document called "inc_top.php" (it's not on the index.php)
This is the code:

This is what I have on index.php:

<div class="top"><?php include("inc_top.php"); ?></div>

and this is code on inc_top.php:

<img class="topimg" src="images/pic.jpg" width="100%" height="auto" border="0" alt="Windows Auction"/>

<div class="logo"><img src="images/tag_logo.png" width="202" height="151" border="0" alt="TAG" /></div>
<div class="windows"><?php if ($page != 'home') { ?><a href="/"><?php } ?><img src="images/windows.jpg" border="none" width="965"height="92" alt="Windows 5774" /></a>
</div>

This is the css:

.top{
    position:relative;
}

.top .logo {
    position:absolute;
    top:0px;
    left:640px;

}

So although the container, "top" is positioned relative, the image, ".logo" still moves around the page.

I's really appreciate help!

[JorgeM]

The problem is that yes while you are using abolute positioning, the parent div's width is not set to a specific value so when the window is resized, the logo will move accordingly.

One option is to place the logo within a div with a specific width, centered very similar to what you did using the #wrapper div.

For example, using my dev tools in Chrome, I applied some changes to validate this..

You can test this code, just so you can see the behavior. This code is not intended for you to use in your page, its only for you to see the concept. If this is an option for you, you can make some slight changes..

<div class="top">
 <img class="topimg" src="images/pic.jpg" width="100%" height="auto" border="0" alt="Windows Auction">
 <div style="width:996px;margin:0 auto;position:relative">
   <img src="images/tag_logo.png" width="202" height="151" border="0" alt="TAG" style="position: absolute;top: -155px;left: 640px;">
 </div>
 <div class="windows">
   <img src="images/windows.jpg" border="none" width="965" height="92" alt="Windows 5774">
 </div>
</div>

[suavedesign]

thank you!!