October 14, 2001 - Positioning Demo

October 14, 2001 Positioning Demo Tips: October 2001 Yehuda Shiran, Ph.D. Doc JavaScript

The style object's position property can have three values: "static", "absolute", and "relative". It is not that trivial what the effect of each position parameter value is. Play around with the three links below and see their effect on the following layout:

This is a paragraph of text as well.

Make it static | Make it absolute | Make it relative When you make it static, the yellow paragraph becomes the first element of the parent paragraph. There are no offsets to take care of, as they are not relevant for static positioning.

When you make it relative, the yellow paragraph is offset by 100 from its static position, as oDiv.style.left = 100. Also, other elements are placed around the yellow paragraph, and never on top of it.

When you make it absolute, the yellow paragraph is placed with an offset of left and top from the window. Also, other elements ignore the yellow paragraph and overlap with it if needed.

Here is the code:

<STYLE>
.divstatic {position: relative}
</STYLE>
<DIV ID=oDiv CLASS="divstatic" STYLE="background-color:yellow;width:60">
This is a paragraph of text in a DIV.</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
oDiv.style.left = 100;
// -->
</SCRIPT>
<P>This is a paragraph of text as well.</P>

<A HREF="javascript:void(oDiv.style.position = 'static')">Make it static</A> |
<A HREF="javascript:void(oDiv.style.position = 'absolute')">Make it absolute</A> |
<A HREF="javascript:void(oDiv.style.position = 'relative')">Make it relative</A>