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.
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.
<h1>Words in a Heading</h1>
Words in a Heading
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.
In order to reposition the <h1> tag in the above
example it can be assigned a position:relative style. Then,
by applying the left and/or top property,
it can be moved by a certain number of pixels from its original location. The following
code repositions this heading by styling the tag with positioning properties.
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.
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>
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
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.
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
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 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
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
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.
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
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.
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
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
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.
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.