Content on a Web page normally appears in the physical order in which it is coded in XHTML. In addition, elements can be floated to the left or right of the page with word wrap around them. You may, however, wish to have additional control over placement of page elements. You can, indeed, have precise pixel control over element positioning with the style properties listed

Positioning style properties.

In order to be positioned precisely on the page, an element must be assigned a position property. Thereafter, the element can be placed at a precise pixel location using the accompanying left, top, and z-index properties.

Relative Positioning

Elements on a Web page normally appear at a location that is relative to surrounding elements on the page. That is, they are physically displayed in the order in which they are coded. This is the case with the following <h1> heading line. It appears next in order on the page because its coding appears next in order in this XHTML document.

Preceding paragraph...

<h1>Words in a Heading</h1>

Following paragraph...

A heading positioned relative to surrounding content.

Normally, in-line text cannot be moved from its default position on the page. The built-in formatting given by the tag and its surrounding tags dictate where content is located. An <h1> tag always appears a double-space below a preceding paragraph and a double-space above a following paragraph. However, by assigning a position property to a tag, it can be repositioned with pixel precision up or down the page or across the page.

<style>
  h1 {position:relative; left:50px; top:-10px}
</style>

A heading repositioned relative to its original location.

With a position of relative, the tag can be repositioned relative to its original location. The left property gives the pixel distance by which the element is offset from its normal horizontal position; the top property gives the pixel distance by which the element is offset from its normal vertical position. In the above example, the heading is positioned +50 pixels from the left of its original location; it is positioned -30 pixels from the top of its original location.

Notice that pixel directions can be positive or negative. A positive value for the left property moves the element to the right; a negative value moves it to the left. A positive value for the top property moves the element down the page, a negative value moves it up the page.

In the following example each word in a sentence is packaged in a separate <span> container in order to style it separately. Each word then has its its top position offset relative to its normal vertical position across the line. All words are contained by a <div> tag to apply font sizing to the group of words.

<div style="font-size:24pt">
  <span style="position:relative; top:-15px">Words</span>
  <span style="position:relative; top:+10px">in</span>
  <span style="position:relative; top:-5px">a</span>
  <span style="position:relative; top:+5px">sentence.</span>
</div>

Words positioned relative to their normal vertical alignment.

Each <span> tag is positioned relative so that its top property can be applied. It is not necessary to position the words horizontally with a left property since <span> tags are, by default, positioned side by side across the line. Only the tops of the words are repositioned from their normal vertical alignment.

By repositioning page elements you can create interesting overlap effects such as drop shadows, as shown by the coding below of two positioned <div> tags.

<style>
  div#SILVER {font-family:impact; font-size:24pt; color:silver;
              position:relative; top:45px; left:5px}
  div#BLACK  {font-family:impact; font-size:24pt; color:black;
              position:relative}
</style>

<div id="SILVER">Drop Shadow</div>
<div id="BLACK">Drop Shadow</div>

Divisions positioned relative to create a drop shadow effect.

This coding takes advantage of the fact that positioned elements are layered as they are added to a page. That is, subsequent elements appear on top of preceding elements as they are coded. This layering is usually not evident since most page elements are not explicitly positioned on top of one another. When elements are overlapped, though, you need to be conscious of this layering. This is the reason for coding the silver drop shadow before coding the black letters in the above example -- so that the black letters (coded last) appear on top of the silver drop shadow (coded first).

Normally, <div> tags are displayed one after another down the page. Recall that the <div> tag causes a line break and positions its contents on the next line. In this example, the black words (coded last) originally appear below the silver words (coded first).

Original positions of drop-shadow divisions.

The silver division, then, needs to be repositioned +45 pixels from the top and +5 pixels from the left of its original position, placing it below and to the right of the black division. Alternately, the black words could be repositioned -45 pixels to the top and -5 pixels to the left of their original positions. Doing so, however, would place the words 5 pixels outside the left margin of the page.

As you are repositioning page elements you will need to use trial-and-error methods to get the exact positioning you want. There is no easy way to know at a glance exactly how many positive or negative pixel offsets are needed for horizontal and vertical placements.

Layering Elements

As meantioned above, page elements are layered on top of one another as they are added to a Web page. However, you can explicitly change this layering of page elements by coding their z-index style properties. The z-index value is a relative measurement. Elements with larger numeric values appear on top of elements with lower values. Thus, an element with z-index:2 appears on top of an element with z-index:1; an element with z-index:20 appears on top of an element with z-index:10. The absolute value of z-index does not matter. All that matters are the relative z-index magnitudes assigned to a set of layered elements.

The colored squares shown demonstrate various positions and layers. In this case, layering is given solely by the order in which the squares are coded -- those coded last appear on top of those coded previously.

<style>
  .RED    {position:relative; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right}
  .GREEN  {position:relative; width:100px; height:100px; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right}
  .BLUE   {position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right}
</style>

<p>
<span class="RED">Red</span>
<span class="GREEN">Green</span>
<span class="BLUE">Blue</span>
</p>

Normal layering of page elements.

The red square is coded first so it appears below the green square which is coded second which appears below the blue square which is coded last. Notice that these squares are produced with <span> tags that are given widths, heights, colors, background colors, and borders. No z-index settings are necessary to create this layering. However, the squares are given left and top stylings to offset them horizontally and vertically from their natural side-by-side positions to overlap them and make their layering visually evident.

The above squares can have their layers reversed simply by assigning them z-index values. In the following code, the red square is assigned the largest value (bringing it to the top) and the blue square is assigned the smallest value (sending it to the bottom). The order of coding the <span> tags remains unchanged.

<style>
  .RED    {position:relative; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right; z-index:3}
  .GREEN  {position:relative; width:100px; height:100px; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right; z-index:2}
  .BLUE   {position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right; z-index:1}
</style>

Reversed layering of page elements.

Recall that absolute z-index values do not matter so long as the differences in magnitude are in proper relationship. The 3, 2, and 1 values used above could have been coded as 30, 20, and 10; or 300, 200, and 100; or 300, 20, and 1. The largest value is on top and the smallest value is on the bottom, irrespective of their absolute magnitudes.

When using relative positioning there is not a lot of latitude in moving elements from their normal vertical positions on the page. The reason is that space is still reserved for the repositioned element at its original location on the page, irrespective of the fact that it has been moved from that location. This can cause excessive blank space to appear on the page as shown by the following example of a repositioned paragraph.

<p>Preceding paragraph....</p>

<p style="position:relative; top:25px; font-size:24pt">
  Repositioned Paragraph
</p>

<p>Following paragraph....</p>

Repositioned paragraph leaving excessive white space at original position.

From its normal position the repositioned <p> tag is moved 25 pixels down the page. However, the original size and location of this tag is maintained in the flow of page elements, occupied now by blank space where the tag would normally appear. Not only that, any follow-on text maintains its position relative to the original location of the repositioned <p> tag, thereby being nearly overwritten by the moved text.

As long as page elements are repositioned vertically within a reasonable number of pixels from their original locations, the above spacing issues should not cause concern. As vertical distances increase, however, blank space appears in the flow of page elements representing abandoned space previously occupied by the repositioned element. You will probably need to try various positionings to get page elements to appear in satisfactory relationships to one another.

Absolute Positioning

Whereas position:relative positions a page element relative to surrounding elements, position:absolute places an element in relation to its container element. By default, the container element is the Web page itself, the <body> tag. Therefore, elements are absolutely positioned in relation to the top-left corner of the Web page and, importantly, are taken out of the normal flow of page elements.

<span style="position:absolute; top:30px; left:150px; z-index:-1; 
font-family:impact; font-size:68pt; color:#E6E6E6">DRAFT</span>

<p>Positioned beneath this paragraph is the word "DRAFT" defined by the 
<span> tag shown above. This tag appears in the XHTML code immediately before
this paragraph. It is positioned absolute; therefore, it is taken out of the 
normal flow of page elements. With this word’s removal from the flow of page 
elements, this paragraph moves up to occupy the abandoned page space, thereby 
overlaying the word. Thus, the word "DRAFT" occupies an absolute position on 
the page unaffected by whatever else surrounds it. It is also given a z-index 
value of -1 to layer it beneath the text layer of the page so that it does not 
overlay the text.</p>

The text layer of a page always has a z-index value of 0 (zero). Therefore, the <span> tag is given a z-index value of -1 value in order to layer the word beneath the text layer so that it does not block out the text.

When a page element is positioned absolute and is given left and top property settings, it is taken out of the normal flow of page elements. In the above example, the <span> tag is removed from its normal physical location preceding the paragraph. The paragraph, then, moves up to occupy the abandoned position of the <span> tag. This means that it does not really matter where an element that is positioned absolute is coded on the page. Irrespective of where it is physically coded, it is still positioned in relation to the top-left corner of the page. The only case where its coded position matters is when the element is positioned only by its left (but not its top) property. If it is not repositioned vertically, it stays in its coded position.

Since it can be difficult to determine left and top page positions relative to a lengthy, scrolling Web page, elements that are positioned in relation to one another are often placed inside another container element. This container element is positioned relative to maintain its position within the flow of page elements; the contained elements are positioned absolute inside the container. Thus, absolute position measurements are made relative to the container rather than to the page. The container becomes the easier-to-manage coordinate system within which contained elements are precisely positioned.

A good general solution to positioning page elements in relation to one another is

1. Define and size a <div> tag to encompass the positioned elements. Position the division relative, thus locating it within the flow of page content. As content is added to or removed from the page, this division still maintains its relative position between other page elements. It moves up or down the page as page content changes.

2. Place elements to be positioned inside the division, and position them absolute. Thus, the left and top distances for the positioned elements are always measured from the top-left corner of the division. This "local" coordinate system stays the same even if the division changes positions within the flow of page elements.

The division shown is positioned relative to maintain its position among other XHTML elements on a page. It is displayed with a dotted border to make it visible. The enclosed squares are positioned absolute, with left and top positions measured from the top-left corner of this division.

<style>
  .DIV    {position:relative; width:300px; height:160px; border:dotted 1}

  .RED    {position:absolute; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           z-index:1; text-align:right}
  .GREEN  {position:absolute; width:100px; height:100px; left:50px; top:25px;
           background-color:green; border:solid 1px white; color:white; 
           z-index:2; text-align:right}
  .BLUE   {position:absolute; width:100px; height:100px; left:100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           z-index:3; text-align:right}
</style>

<div class="DIV">

  <span class="RED">Red </span>
  <span class="GREEN">Green </span>
  <span class="BLUE">Blue </span>

</div>

Absolute positioning inside a container positioned relative.

The advantage of using this strategy is that the container division can be moved to any location on the page and its contained elements still maintain their absolute positions within the division. It is not necessary to recalculate their positions since they are always relative to the top-left corner of the container division.

The following recode of a drop shadow uses the above strategy to simplify the previous coding.

<style>
  div#CONTAIN {position:relative; height:45px; width:180px; border:dotted 1px}

  div#BLACK   {position:absolute; left:0px; top:0px; z-index:2; font-family:
               impact; font-size:24pt; color:black}
  div#SILVER  {position:absolute; left:+5px; top:+5px; z-index:1; font-family:
               impact; font-size:24pt; color:silver}
</style>

<div id="CONTAIN">
  <div id="SILVER">Drop Shadow</div>
  <div id="BLACK">Drop Shadow</div>
</div>

Absolute positioning of elements inside a container positioned relative.

An encompassing division (positioned relative within the flow of page content) contains the two layered elements to be positioned. The container division is given a dashed border to show its size and position. The words and shadow positions can be easily determined by their distances from the top-left corner of this division. The words are positioned at the very top-left corner of the division (left:0px; top:0px); the shadow is offset 5 pixels from the words (left:+5px; top:+5px). The words are given a z-index value larger than the shadow to layer them on top.

When enclosing positioned content inside a division you normally need to set the width and height properties of the division. A positioned division has a default width that spans the width of its container -- the width of the Web page if its container element is the <body> tag. You may wish to set the division width only large enough to enclose its contained elements as is done for the above drop shadow effect. A positioned division also has a default height of 0 pixels irrespective of its content. Therefore, you will need to set its height large enough to reserve vertical page space for displaying its enclosed content.

The example shown below is a more elaborate use of positioning. It is a mock-up of a newsletter using the above positioning strategy. Borders are shown around the various elements to help visualize the layout.

The entire newsletter is contained within a division that is sized 500 x 480 pixels and positioned relative to fit within the flow of content on the page. Inside this encompassing division are various other divisions positioned absolute for exacting layout inside the container division.

Shown below is an outline of the XHTML coding for the newsletter layout. No content has yet been added to the newsletter; at this design stage it is just necessary to format its layout. Content can be easily added once it is known where it goes. Note in particular the positioning types and measurements for the various divisions.

<style>
div#OUTER {position:relative; width:500px; height:480px}
div#HEAD  {position:absolute; left:0px;   top:0px;   width:500px; height:50px}
div#COL1  {position:absolute; left:0px;   top:60px;  width:240px; height:260px}
div#COL2  {position:absolute; left:260px; top:60px;  width:240px; height:260px}
div#FOOT  {position:absolute; left:0px;   top:330px; width:500px; height:150px}
</style>

<div id="OUTER">

  <div id="HEAD">
    Newsletter Layout
  </div>
  
  <div id="COL1">
    First Column
  </div>
  
  <div id="COL2">
    Second Column
  </div>
  
  <div id="FOOT">
    Footer
  </div>

</div>

As you can see, it is possible to position page elements at exact pixel locations on a Web page. It is a bit of trouble to determine pixel distances, but you can gain precise control over the layout of a page and the exact positioning of its contents.