Absolute Examples

Items that have position absolute are fixed on the page. They will not wrap with the other page parts if the window is resized or if text is added to the page.


Smileys being positioned appear above. Smileys below are not being successfully positioned.

Position set within IMG tag

Sad smiley face

Winky smiley

Smiley with open mouth

Smiley with glasses

Smiley with wide open eyes

Smiley with tongue out

Smiley face- position set within the IMG tag using STYLE

Sad smiley - position set with CLASS in the P tag

Winky smiley position set with CLASS in the DIV tag

Open Mouth smiley position set inline in H2 tag

Glasses smiley position set within the LAYER tag.

Open Eyed smiley position set with CLASS in LAYER tag

Tongue Out smiley position set with CLASS in BLOCKQUOTE tag.

Disadvantage of Absolute Positioning

Look at this page under various window widths. Do you see what happens to the smileys?
[Caution: Resizing the window or frames under NC4 may cause the browser to crash or lose the formatting in this frame. Reload the frame to recover formatting.]

Though text wraps when window size or resolution is changed, the items with absolute position don't move. This may cause undesirable overlaps vertically and may place items out of view horizontally.

In addition there is the question of browser differences. For example, this page under NC4 at 800 x 600 puts all but 2 smileys in a row beside the heading Absolute Examples. But at 640 x 480 the smileys are much higher on the page. On the other hand, under IE4 only 2 smileys are beside the heading while the others string down the page on the left, one per line. If other items further down the page had absolute position, they would wind up in VERY different positions with respect to the wrapping text under IE4 than under NC4!

Under NC4, CLASS applied to LAYER appears to act as a relative position instead of absolute. (See the position of the Open Eyed smiley under NC4.) LAYER successfully takes settings directly in the tag for TOP and LEFT for absolute placement. Netscape 6 leaves only the smiley with glasses in relative position. But the line of smileys is not straight. Very odd effect.

IE4 apparently supports absolute position only for P and DIV. But, IE6 positions all the smileys absolutely except the two using LAYERS, which is a Netscape creation anyway.

Let's see what differences there are when we use relative position.
© 1997-2002 Jan Smith   <jegs1@jegsworks.com>