Setting Positions in DHTML

Any element in a document can be singled out and placed in a specific position within that document. There are three different positioning types.

• static - flows the content in-line but allows movement of the element around within the element's natural position on the screen
• relative - flows the element in-line but allows movement of the element around the document within the element's natural position in the document
• absolute - an element is placed on the document, irrespective of other elements in the document, in a specific position in the document

Absolute Positioning

An absolutely positioned element is placed anywhere in a document.

#absElement { position: absolute; top: 25px; left: 50px; width: 200px; color: red; font-weight: bold; }

Relative Positioning

A relatively positioned element can be moved from its natural position in the document using the top and left properties.

EM { position: relative; top: -15px; color: red; font: normal bold 36pt times, serif; z-order: -1; }

Adding Absolute and Relative Elements

The example below sets up a class which can be positioned relative to other content in the document even though its own content is absolutely positioned.

.relElement { position: relative; margin-top: 15px; }
.title { position: absolute; font-size: 36pt; color: #9999CC; }

Static Positioning

Elements are automicatically defined in a document as being statically positioned unless defined as absolute or relative. Below is an example using three different positioning types.

.stat { position: static; font: bold 45pt helvetica; }
.rel { position: relative; top: 0px; left: 45px; font: bold 15pt times; color: red; }
.abs { position: absolute; top: 25px; left: 175px; width: 150px; font: bold 35pt helvetica; color: pink; }