You can now position and size any element on the page using simple coordinates (top, left, width, height, etc.). You can also use z-ordering to control the vertical stacking of absolutely-positioned page elements. For example, you can position an image above a block of text, or one image on top of another. You can, of course, combine positioning with events and timers to create exciting interactive pages!
Absolute Positioning |
Relative Positioning |
Animation with Dynamic Positioning |
Z-Order (Vertical Stacking) |
Click on the headings at left for more information.
Absolute positioning allows you to set the coordinates for an object anywhere within its container. The container is the parent of the object; the default parent is the BODY of the page. The upper left of the container is at 0,0. Because most Web pages will display on variously sized screens, you can specify coordinates either as a percentage of the document width and height, or using specific numeric coordinates. Absolutely positioned items are not included in the "flow" of the page, so you need to position them carefully or they will overlap other items on the page.
For example, there is an image of a mouse at left that starts out at the absolute position 50,350. If you move the cursor over the image, it moves to a new random position. It ought to keep you entertained for a while!
Relative positioning allows you to specify the coordinates of an object relative to where it would normally be on the Web page. For example, if you create a <DIV> for a block of text, and set the TOP coordinate to +100, the text will appear 100 pixels lower than its natural position in the flow of the page. This is very useful when you want to position objects relative to each other, such as when you associate an image with a paragraph of text. Mouse over for an example of relative positioning of text.
<DIV ID="relPara" STYLE="position:relative; left:50; top:0"> This paragraph and the one above it are part of the same <DIV>. The paragraph above is positioned absolutely to put it 120 pixels in from the left edge of the page. This paragraph is 50 additional pixels right of its natural position, because of the STYLE parameters you see above. </DIV>
To create animation using dynamic positioning, simply use a sequencer (one of the multimedia controls) or a timer to determine how often to move an object around. This allows you to create simple animations that download quickly. You can animate any object by changing it's position coordinates. Note: You must specify either an absolute or relative position for an object as part of the STYLE attribute if you wish to move it. You can also move objects by drag and drop, using the onMouseMove event. For example, you can get the coordinates of the mouse during the event handler using window.event.x and window.event.y.
In addition to being able to move stuff around on the page, you can also control object stacking. This is called z-ordering. Objects higher in the z-order appear to be on top of objects lower in the z-order. This applies to all absolutely positioned elements -- text can be over or under an image, and even objects participate in the z-ordering. Relatively positioned elements can also stack, but they stack in natural order: Elements that appear first are lower than elements that appear later. Absolutely positioned elements are completely flexible about stacking order. For example, you can make an image of a basketball appear to pass in front of or behind various other images.
Click and drag a face for the Captain!
![]() |
Z-INDEX = 11 |
![]() |
Z-INDEX = 14 |
![]() |
Z-INDEX = 13 |
![]() |
Z-INDEX = 12 |
![]() |
Z-INDEX = 15 |
<DIV ID="squirmy" STYLE="position:absolute; left:50; top:350; width:66; height:22; visibility:hidden"; z-index:10> <IMG SRC="images\squirmy.gif"> </DIV> ' See source for this page to see more tricks for controlling movement. sub squirmy_onMouseOver moveMouseAmount = Int((75 - 35) * Rnd + 35) squirmy.style.left = squirmy.style.posLeft + moveMouseAmount moveMouseAmount = Int((75 - 35) * Rnd + 35) squirmy.style.top = squirmy.style.posTop + moveMouseAmount end sub
The following parameters apply to both absolute and relative positioning:
Parameter | Allowable values | Description |
position | absolute, relative, static | Determines how the element is positioned. |
left | length, percentage, auto | Sets the position of the left edge of the element. |
top | length, percentage, auto | Sets the position of the top edge of the element. |
width | length, percentage, auto | Sets the width of the element. |
height | length, percentage, auto | Sets the height of the element. |
clip | shape, auto | Determines which portion of the element is visible. |
overflow | visible, hidden, auto, scroll | Determines how extra content is displayed: overlap, not displayed, or scrollable. |
z-index | auto, integer | Determines the stacking order of absolutely positioned elements. |
visibility | inherit, visible, hidden | Determines whether an element is visible or not. |
This is how you set a timer:
dim imgTimer, amountTime ' Set time in thousandths of a second: amountTime = 4500 ' 4.5 seconds sub window_onload ' Get the timer started when the document loads. imgTimer=window.setTimeout("myFunction()", amountTime) end sub sub myFunction() ' Perform the action, such as moving on object 10 pixels to the right: myObject.style.left = myObject.style.posLeft + 10 ' set the timer again. imgTimer=window.setTimeout("myFunction()", amountTime) end sub
This example shows how to create a DIV with an image in it. The position is set to absolute, and the z-order is set high (to 11) so that the object will be on top of objects with a lower z-order. The object also is initially set to invisible; you would need a line of code to make it visible. (bball.style.visibility="visible").
<DIV ID="bball" STYLE="position:absolute; z-index:11; visibility:hidden"> <IMG SRC="images/bball.gif"> </DIV>
This animation uses z-ordering to put objects either in front of or behind the basketball. Z-ordering is done as part of the STYLE settings, like this: <DIV ID="sphere1" STYLE="position:absolute; z-index:11">.
The relative position of an object is based on the element's natural position. "Natural position" is determined by the position of the parent element as well as any preceeding and following elements. If you specify a relative position, it is an offset from this natural position. For example, if a paragraph is set to relative position, the natural position will be below the preceeding paragraph or image. Yet another example: Imagine a DIV with two paragraphs. The DIV itself has an absolute position of top:100 and left:50. The first paragraph has an absolute position, and the second paragraph has relative position. The natural TOP of the second paragraph is 100, and the natural LEFT is 50. Why? Because the first paragraph's absolute position takes it out of the natural order. If the second paragraph has a relative position and a TOP of 15, the actual top will be at 115 (100 for the DIV it is in, and 15 on its own). Here is how this example would look in HTML code:
<DIV ID=myDIV STYLE="position:absolute; top:100; left:50"> <P STYLE="position:absolute; top 100; left:600">This is the first paragraph.</P> <P STYLE="position:relative; top:15">This is the second paragraph.</P> </DIV>