Basic Absolute Positioning

Normally, objects like images and text are positioned in the general flow of a page as the page is built by the IE rendering engine. We have limited control as to where they will appear. We can choose left, or right, or center, or we can pad elements with spaces, but accurate positioning is somewhat tough to come by.

Using Absolute Positioning techniques, we gain exact control of where an object appears. Let me show you the basics of how this is done. Positioning objects on the screen this way is not as hard as you might think.

Here is some simple HTML which displays an image on a blank window. We'll use our flying saucer image again for the first image we'll work with:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="flyingsaucer.gif" style="position:absolute; left:0px; top:0px; z-index:1" border=1>
</BODY>
</HTML>

Look at the <IMG> tag which defines the image. Notice we have applied several STYLE attributes to the image. We have defined the positioning to be of the ABSOLUTE type, and we have set the LEFT: position to 0 pixels from the left edge of the window, and the TOP: position to 0 pixels from the top edge of the window. As you can see, the saucer appears at the top left corner of the window. I have drawn a border around the transparent .GIF so you can see the saucer's extent.

Another parameter, the Z-INDEX:1 parameter, determines the image's "layer" position on the window. You might consider Z-INDEX:1 as the first layer above the window itself. Z-INDEX:2 would be the layer above that, then Z-INDEX:3, 4, and so on. Using the Z-INDEX parameter allows you to control the layering of objects on the window.

Hold the SHIFT key down and move the mouse and you will see that the saucer moves with your cursor. The upper-left hand corner of the saucer is positioned on the cursor. Shown on the screen is the HTML tag for the saucer image. Its positioning parameters change dynamically according to its window position. If you were to code the <IMG> tag exactly as displayed, it would position the saucer as you see it.

Now, let's complicate things a bit. We'll introduce a second image, a rocket ship, which occupies the layer above the saucer. Its layer number is set by the value Z-INDEX:2. You can move the rocket by holding the CTRL key down while moving the mouse. Notice the rocket moves over and above the saucer, showing that its layer is higher than the saucer.

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="flyingsaucer.gif" style="position:absolute; left:0px; top:0px; z-index:1" border=1>
<IMG src="rocket.gif" style="position:absolute; left:0px; top:230px; z-index:2" border=1>
</BODY>
</HTML>

An important thing to remember about Absolute Positioning is that the LEFT: and TOP: positioning parameters for the object are relative to the object's container. In these two cases shown, the containing element is the window itself (the <BODY> tag).

If we were to place the saucer within a smaller element, let's say a <DIV> tag, and make the <DIV> also absolutely positioned, then the saucer's LEFT: and TOP: positioning would be relative to the <DIV> containing element and not the window. Look at the code which generates this static example:

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV style="position:absolute; left:50px; top:50px; width:250px; height:200px; z-index:1; background-color:#c0c0c0">
<IMG src="flyingsaucer.gif" style="position:absolute; left:20px; top:20px" border=1>
</DIV>
</BODY>
</HTML>

Outer border represents the window:
 
Now, notice how this relative positioning works together here. The <DIV> element's (the gray box), container is the window itself. The <DIV> element is positioned 50 pixels from the left window edge and 50 pixels from the top. It is sized at 250 pixels wide and 200 pixels high. Contained within the <DIV> element we find the saucer image. It is also absolutely positioned and located 20 pixels from the left edge and 20 pixels from the top. So, as you can see, we have two containers here: the window, and the <DIV> element. Remember: the absolute positioning of an object is relative to its absolutely positioned containing element.

Also notice we have placed the <DIV> element at Z-INDEX:1, but have not specified the layer value for the image. Since the image is contained in the <DIV> element, it assumes the same layer index. And, another very important fact is this: since the image has the same layer index as its containing element and occurs in sequence AFTER it, it will be layered ABOVE the containing element even though it holds the same layer value.

There are other operators we can use to position an object besides the pixel (px) method. For one, we can use percentage (%) to position. Percentage refers to the distance across or down the containing element. The following code positions the saucer's upper-left hand corner at 50% across the window width and 50% down from the window top:

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src="flyingsaucer.gif" style="position:absolute; left:50%; top:50%" border=1>
</BODY>
</HTML>

Outer border again represents the window:
 
Notice how the upper-left hand corner of the saucer is at exactly the center of the window (50% from the LEFT: and 50% from the TOP:). Using the percentage method comes in very handy because we never know the exact size of the viewer's window, in the case of posts and e-mails (and in web page design too). If we position an object using the percent method, we'll always know that it will be at the same place, proportionally, on the viewer's window.

There you have it. That's the quick course on Absolute Positioning. I hope it helps you understand its power and enables you to try it sometime.