13.1 Making an Element Positionable in the Document Space

NN 4, IE 4

13.1.1 Problem

You want one or more elements in your page to overlap other elements or appear in a specific location on the page out of rendering order.

13.1.2 Solution

Assign the absolute value to the position CSS property. You can do this in a separate style declaration:

<style type="text/css">
#someElementID {position:absolute; left:100px; top:100px}
</style>

Or you can include the style declaration as an attribute to an element:

<div id="myDIV" style="position:absolute; left:100px; top:100px">Content Here</div>

Give coordinates for the top-left corner of the element relative to the top-left corner of the document.

13.1.3 Discussion

There is nothing particularly dynamic about a positioned element, except that it is loaded with potential for scripting activity in motion, visibility, stacking, and clipping. Except in Navigator 4, the positioned element itself can be of any renderable HTML element, and may thus have event handler assignments (perhaps for mouse dragging) and any HTML content. Even an inline element (such as a span element) becomes a block-level element when it is positioned (even if the display style property value doesn't necessarily change to reflect its behavior).

As you will see in Recipe 13.3, scripted modifications to the position of an element are performed via the style property of the element. Using W3C DOM element referencing, for example, allows you to adjust the top coordinate of the example as follows:

document.getElementById("myDIV").style.top = "200px";

Note that the position property of the style object is read-only, which means that once an element renders according to its associated position CSS property, the value cannot be changed. Therefore, you cannot turn an inline element into a positioned element simply by altering the value assigned to the style.position property.

13.1.4 See Also

Recipe 13.3 for a script library of functions to control positioned elements; Chapter 11 for style sheet assignment syntax.