Through the use of various positioning style properties, the designer can gain full control over the initial structure of a Web page as well as position elements dynamically—move them around under script or user control. This tutorial reviews the ways in which these settings are used to initially position page elements. Subsequently, consideration is given to changing these layouts dynamically through scripts.

Establishing Layout Positions

XHTML elements appear on a Web page in the order in which their tags are coded. However, stylesheets can be applied to the tags in order to position the elements precisely, overriding their default locations within the normal flow of page elements. Positioned elements are placed on the page with the style sheet settings shown in the following table.

In order for an XHTML element to be positioned accurately, and for the ability to change its position dynamically, it must be assigned a position style. Whether the element is positioned relative or absolute governs the effect of other positional settings on the element.

All positioning is measured relative to a container element. In the normal case, the container, or parent, element is the Web document itself, and any positioning is relative to the top-left corner of the document. The top-left corner is considered to be h,v coordinates 0,0 — that is, 0 horizontal pixels from the left edge of the page and 0 vertical pixels from the top edge of the page. The left and top positioning values for an element are usually specified in pixels (the default measurement), but can refer to percentages of the width and height of the containing element. Measurements also can take on negative values to place objects outside the boundaries of the container element.

Besides the document itself, other XHTML elements such as <p>, <div>, and <span> tags can become container elements. In this case, positioning of an object inside these tags is relative to that container. The top-left corner of the container is coordinate 0,0; and left and top settings for the enclosed object are measured relative to this location.

The value of z-index is a positive or negative integer to indicate a layer above or below other positioned elements. Elements with higher z-index values appear on top of elements with lower values. The text layer has a z-index value of 0. Positioned elements coded subsequently on the page appear on top of positioned elements coded previously; z-index settings change these original layers.

Widths and heights of page elements normally take on values that represent the natural sizes of the elements. In some cases these sizes need to be adjusted with width and height settings to override the defaults.

Absolute Positioning

The position:absolute property setting places an element at an exact pixel location in the document. The positioned element is taken out of the flow of nonpositioned elements. Surrounding elements are unaffected and maintain their normal, nonpositioned locations relative to one another. This effect is seen in the following graphic and text paragraphs.

Text paragraph....

Text paragraph....

<p>Text paragraph....</p>
<img src="jsdhtml.gif" style="position:absolute; left:200px"/> 
<p>Text paragraph....</p>

The image is coded between two paragraphs but is positioned absolute. Its location on the page, then, is exactly where it is coded, but moved to the right 200 pixels (left:200px). Importantly, the image is taken out of the flow of page elements, meaning that the accompanying nonpositioned paragraphs appear at their normal locations relative to each other. They are formatted as if the <img> tag had not been coded between them.

Page elements positioned absolute can have both their top and left positions specified. In the above example only the left style setting is made for the image. By default, its top setting is taken from its coded location. As you can see, the top edge of the graphic is positioned between the paragraphs.

When specifying a top coordinate for an absolutely positioned element, remember that the setting is relative to the top of its container element. In the above case, the container is the Web page, so a top setting would indicate the number of pixels from the top of the page. On a lengthy scolling page, where the positioned element appears far down the page, it can be difficult to determine its top measurement. Therefore, elements positioned absolute on a page are usually not assigned a top style property unless they are positioned close to the top of the page where pixel measurements can be more easily made.

Relative Positioning

An element positioned relative appears at its normal location within the flow of other elements on the page. Any accompanying left or top setting adjusts the element relative to this normal location.

The following image appears at the location at which the <img> tag is coded, but adjusted to the right 200 pixels. It remains in its normal vertical position between the two nonpositioned paragraphs.

Text paragraph....

Text paragraph....

<p>Text paragraph....</p>
<img src="jsdhtml.gif" style="position:relative; left:200px"/> 
<p>Text paragraph....</p>

Below is another example of relative positioning, this time using <span> tags to enclose text in order to position words on the page. The tags declare relative positioning. Without further specifications, the words appear in their normal locations across the line.

<p style="font-size:18pt">
<span style="position:relative">Here</span>
<span style="position:relative">are</span>
<span style="position:relative">four</span>
<span style="position:relative">words.</span>
</p>

These relative settings can be modified so that the words are adjusted relative to their normal positions

<p style="font-size:18pt">
<span style="position:relative">Here</span>
<span style="position:relative; left:20px; top:10px">are</span>
<span style="position:relative; left:50px; top:20px">four</span>
<span style="position:relative; left:100px; top:-10px">words.</span>
</p>

The plus and minus pixel values for the left and top properties place the words to the left and right, and above and below, their normal positions across the line.

Positioning within Positioned Elements

As mentioned above, there are difficulties in positioning elements absolute on a scrolling Web page. When information is added to or removed from the page, positioned elements appear in different locations from where they were originally coded; their left and top styles often will need adjusting every time there is content change on the page. To avoid these problems, absolutely positioned elements can be placed inside other container elements so that positioning is always relative to this parent element, wherever it appears on the page.

The <div> tag serves as a convenient container element for other tags that require absolute positioning. The division itself can be positioned relative to maintain its coded position within the flow of the document; elements inside the division can be positioned absolute in relation to their container division. Although the container division itself might get pushed up and down the page as content is added or deleted, the positioned elements inside the division always maintain their exact locations.

In the following example, a division is used to contain two images. You might notice that these pictures are not <img> tags. They are text characters rendered in the Webdings font. Also, the division is displayed shaded and with a border to make it more noticeable.

<div style="position:relative; height:200px; width:400px; border:solid 1px">
  <span style="position:absolute; left:50px; top:25px;
    font-family:Webdings; font-size:60pt">E</span>
  <span style="position:absolute; left:150px; top:75px;
    font-family:Webdings; font-size:60pt">P</span>
</div>

The container division is given a position:relative style setting. This setting positions the division at its coded location on the page, and it adjusts surrounding page elements around the division. More importantly, this style setting defines the division as a positioned element, and establishes the coordinate system for positioning its enclosed content.

The division must be given a height setting to encompass its content. A division does not have a default height, and in the absence of this setting would appear as a thin line across the page, without depth and without reserving vertical space on the page to enclose its content. A width property is required if the division does not span the available page width.

The enclosed <span> tags are given position:absolute style settings. This means that they are positioned at absolute horizontal and vertical locations relative to the coordinate system of their parent division. Their left and top settings are measured from the top-left corner of their container division.

Click the above "Add Content" button that accompanies the division to view the results of adding content to this page. Elements inside the division maintain their absolute positions relative to the division even while the division itself moves up or down the page.

Element Layering

Positioned elements appear on different visual layers of the Web page. The primary layer is the text layer that has a default value of layer 0 (zero). As subsequent positioned elements are placed on the page they are assigned increasing layer values and appear on top of one another. Below are three <span> areas defined as colored blocks and coded in sequence with their top and left coordinates offset so that you can see their layering.

<div style="position:relative; width:150px; height:100px">
  <span style="position:absolute; top:0px; left:0px; width:50px;
    height:50px; background-color:red; border:solid 1px white"></span>
  span style="position:absolute; top:20px; left:20px; width:50px;
    height:50px; background-color:blue; border:solid 1px white"></span>
  <span style="position:absolute; top:40px; left:40px; width:50px;
    height:50px; background-color:green; border:solid 1px white"></span>
</div>

By default, each subsequent object appears on top of the previously defined object, and all objects are above the text layer of the page. These layers can be changed with z-index style settings. The following blocks have settings which override their default layers.

<div style="position:relative; width:150px; height:100px">
  <span style="position:absolute; z-index:3; top:0px; left:0px; width:50px
    height:50px; background-color:red; border:solid 1px white"></span>
  <span style="position:absolute; z-index:2; top:20px; left:20px; width:50px
    height:50px; background-color:blue; border:solid 1px white"></span>
  <span style="position:absolute; z-index:1; top:40px; left:40px; width:50px
    height:50px; background-color:green; border:solid 1px white"></span>
</div>

Now, the red block (z-index:3) appears on top of the blue block (z-index:2), which appears on top of the green block (z-index:1).

When assigning z-index values, the absolute magnitude of the values is not important. Values of 100, 200, and 300 have the same effect as values of 1, 2, and 3. It is their relative, not their absolute, magnitudes that are important.

If you code elements in the same order as their desired layering, you may not need to assign z-index values. In the following example of a drop shadow, the shadow text is coded first, ensuring that the normal text, coded last, appears on top.

<div style="position:relative; height:60px">
  <span style="position:absolute; top:5px; left:5px
    font-family:impact; font-size:32pt; color:silver">Drop Shadow</span>
  <span style="position:absolute"
    font-family:impact; font-size:32pt; color:red">Drop Shadow</span>
</div>

One case in which you must assign a z-index layer is when positioning an element behind the text layer of the page, which by default is z-index:0. In the following example, the shaded division would overlie and hide portions of the text layer without a negative z-index setting (-1) to place it below the text layer.

<div style="position:absolute; z-index:-1; top:50px; left:20px; width:200px; 
height:60px; background-color:#F0F0F0; border:solid 1px"></div>

<p style="font-size:18pt">
This<br/>
is<br/>
the<br/>
text<br/>
layer<br/>
</p>