Uncle Jim's Web Designs and Tutorials

This is part seven of a series on Dynamic HTML


Positioned Element Types

Statically Positioned Elements

Let's briefly discuss a similar topic: statically positioned elements.

In FireFox, IE 4+ and NS 6+ , you can change virtually any element. Here's an example that should work in the non-archaic browsers using the <p> tag:

Mouse me Over!

This can be accomplished with the following code:
<p onmouseover="this.innerHTML='You did it!'" onmouseout="this.innerHTML='Mouse me Over!'">Mouse me Over!</p>

If an element does not use any positioning methods, it is positioned "static", that means within the normal flow of the HTML document. The positioning properties allow you to specify the left, right, top, and bottom position of an element.

With CSS, an element (a box) can be positioned either fixed, absolute or relative, and positioned elements are placed in relation to their containing blocks. However, they are not confined by this containing block.

Static, or non-positioned, elements use the "initial containing block" or "root element", and this is the <HTML> </HTML> box.

For a fixed element, the containing block is always the browser window. This means the fixed element always remains in the same place in the window. A good example of this is a frame page.

Absolutely Positioned Elements

The absolutely positioned element is taken out of the normal flow of the document and the space it occupied in the static flow will not be preserved. It is placed with absolute position properties inside the root element, and root element in this case describes the closest positioned ancestor. If there is no positioned ancestor, the initial containing block will be used.

Relatively Positioned Elements

Unlike the absolute positioned element, a relatively positioned element does not have a containing block, it appears to be part of the normal flow. It is moved using the positioning properties (top, right, bottom, left) away from its normal (static) position within the document flow and placed somewhere else while preserving the space it would occupy in the static flow; it takes up space and moves any adjacent elements away to make space for itself, just like all statically positioned boxes.

Next, we compare using DIV to LAYER.