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)

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


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 screens of various sizes, 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 that 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.

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 its 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 object 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.

<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.