Position and Motion

<DIV style="position:absolute; left:0px; top:0px;width:200px;height:100px">This is a container for your contents</DIV>

Passing your mouse over this link Position 0,0 will show a container 200 pixels wide by 100 pixels high in the top left corner of this page at the X,Y co-ordinates 0,0.

In order to position the box elsewhere on the page enter a number for the left and/or top attribute.

Position 200px,210px

Note:
If you have scrolled down the page do not mistake the top of the window for the top of the page.

You now have the information needed to place a layer anywhere on or off your page.

Each time you click on the link Move Layer you call function moveDiv() which will move the layer 100 pixels to the right until it disappears off screen.

We need to be able to identify this DIV so we give it an ID. The ID name can be any of your choosing.
The reason we need the identity is because the script needs to know which DIV it is going to work with.

To automate the above you would include the setTimeout method

Now you only have to click on the link Auto Move Layer once and function moveDiv() is called every 100 milliseconds by the setTimeout method.

An addition to the Auto Move Layer script is the method clearTimeout() to stop the layer once it has reached the edge of the page, otherwise the layer would carry on and on and on and on and .........

Click on the link Auto Move Layer 2, when the layer reaches the edge of the page it is repositioned back to zero

An addition to the Auto Move Layer 2 script is the method to return the layer back to its original position once it has reached the edge of the page, otherwise the layer would carry on and on and on and on and .........

This final example shows how to move the layer to the right and have it scroll back to its start position.

The above script uses a function to move the layer right and a second function to move the layer left.
The second function is not really necessary but for this example it makes it easier to explain what is required from the script and hopefully easier to understand how the script works.
The shorter script below does exactly the same by negating the step value when conditions are met.

<script type="text/javascript">
<!--
step=50 // pixel movement
function autoMove4(){

divElement=document.getElementById("div5")
currentPosition=divElement.offsetLeft
currentPosition+=step
divElement.style.left=currentPosition+"px"
timer=setTimeout("autoMove4()",100)

pageWidth=document.body.clientWidth
elementWidth=divElement.offsetWidth

if(currentPosition>=pageWidth-elementWidth){
step= -step // negate step value
}


if(currentPosition<10){ // if currentPosition is less than 10
clearTimeout(timer) // stop timer
divElement.style.left=10+"px" // reset to 10
step= -step
}
}
// -->
</script>

<DIV id="div5" style="position:absolute; left:10px; top:250px;width:200px;border:1px solid black">Auto Move Layer 4</DIV>
<a href="#null" onclick="autoMove4()">Auto Move Layer 4</a>

So the three items you need are:

1. The container. DIV
2. The script. Javascript
3. Method of activation. Onload or Mouse Event

Note;
The active examples in this page use a relative position to keep the layers within the flow of this document.
The copy & paste examples use an absolute position

Absolute positioning takes the element out of the natural flow of the document and could be shown over the top of other content within the page.

The following example demonstrates the use of the position property's, relative, absolute, and static values.

Static

The box is placed according to the normal flow. The 'left' and 'top' properties do not apply.

Relative

The box is placed according to the normal flow, then the box is offset relative to its normal position.

Absolute

The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

While the top and left values of the Container remain the same, (top: 100px; left:100px;) the value of the position property determines the point of origin from which those values are based.

<style>
.example{position:static; top:100px; left:100px}
</style>

<DIV>A PARAGRAPH.</DIV>

<div class=example>Container.</SPAN>