Keeping an item(div) floated on top of a page

Good morning everyone,
I need a way to place an item, say a div or an image over a page. I just saw an example similar to what I am looking for. There is a form at the bottom right corner of the Sitepoint home page. It moves with the window size and does not stay behind.

I tried using a simple CSS only method. By making a div 100 percent wide, absolute positioned and then placed an image in the background. The imaged is positioned to the top right.

This works well but with one problem, when the window is re-sized and you scroll using the horizontal scroll bar the image is left behind in the window.

I am thinking this is only possible with JavaScript.
What are your thoughts?

IC

Your description sounds odd. Do you have a working example? From what you describe, I’d expect the image to follow the div around. We need to see some code at least.

Here is an example I just put together. It is a little different.
Because I placed a Div in the absolute positioned div and floated it right:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
body{
position: relative;
margin: 0;
padding: 0;
}

#container, #content{
width: 960px;
margin: 0 auto;
background-color: #999999;
}

 #content{
 width: 500px;
 height: 400px;
 background-color: #000000;
 margin: 0 auto;
 }

#adBox{
position: absolute;
width: 100%;
height: 100px;
}

#adImage{
background-color: #FF0000;
float: right;
width: 100px;
height: 100px;
}


</style>

</head>

<body>
<div id="adBox">
<div id="adImage">
</div>
</div>


<div id="container">

<div id="content">
</div>

</div>
</body>
</html> 

Do you noticed how the red box stays behind when you scroll horizontally when the window is re sized?

IC

I would adjust the CSS to this:

#adBox{
position: absolute;
width: 100px;
height: 100px;
top: 0;
right: 0;
}

#adImage{
background-color: #FF0000;
width: 100px;
height: 100px;
}

That keeps the red box in the top right corner (where you seem to want it). BUT … if the viewport bets smaller than the 960px of the content box and then you scroll, the box will still stay put. But that’s a rare situation. If you remove this

#container, #content{
width: 960px;
}

It won’t happen any more.

You aren’t thinking of position:fixed are you?


#adImage {
    background-color: #FF0000;
[B]    position:fixed;
    right:0;
   top:0;[/B]
    width: 100px;
    height: 100px;
}