It works like this :
When a browser renders an object on the page with CSS positioning,
it places it into an invisible rectangle, called a box.
You can set the box's exact distance from the top and/or left edges of the browser
window (known as absolute positioning), or you can offset the box from other
elements on the page (known as relative positioning).
You can also specify the height and width of the box.
You can even layer objects on top of one another.
And since objects can overlap, CSS positioning includes clipping features
that let you cut off an area of an element - ie, to have a top object reveal
another one beneath it.
Finally, you can make entire objects visible or invisible.
To use positioning on an element, you must first declare its position property to be absolute or relative:
H1 { position: absolute }
Then you can add whatever positioning properties you like (see the CSS reference table
for available properties and values). For instance, the following code places <H1>
text inside a box that's 150 pixels from the top of the page and is 200 pixels wide by 200 pixels high:
H1 { position: absolute; top: 150px; width: 200px; height: 200px }
Of course, you probably don't want all your <H1>
elements to appear in the same spot. This is where in-line styles,
ID selectors, and the <DIV>
and <SPAN> elements come in handy.
For example, this code positions only the contents of this particular <DIV>
element:
<DIV style="position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background-color: red">
This is text in a red 200-by-200-pixel box that is 200 pixels from the top and
left edges of the window.
</DIV>
Absolute positioning offsets elements from the edges of the browser window, while relative positioning places elements into the flow of the document--that is, offsetting them from the previous element in the HTML code. This lets you place objects in relation to each other without having to specify exactly where on the page to draw each object.
In the following example, the first line of text flows normally across the page.
The second line, within a <SPAN>
that uses the positioning styles outlined in the offset
ID, is 50 pixels below and 25 pixels to the right of the element above it.
(The top and left
properties leave space above and to the left of the element to which their style is applied.)
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#offset { position: relative;
top: 50px;
left: 25px
}
-->
</STYLE>
</HEAD>
<BODY>
This text will flow normally across the page, while the next line of text will be offset from the end of this line.
<SPAN id="offset">
This text is offset from the above line--50 pixels on top and 25 pixels on the left.
</SPAN>
Here's the part you've been waiting for: 3D layering! In positioning HTML elements
we explained how to set your object's x and y coordinates, or its horizontal
and vertical positioning. CSS positioning uses the z-axis to layer objects
on top of each other. Normally, if you position multiple elements at the same x
and y coordinates, each new element will cover up the earlier elements.
But with the z-index property, you can specify the layer on which an
object lies. By setting the z-index higher or lower, you can move the
object up or down in the stack.
In the example below, both lines of text sit at approximately the same absolute
location on the page (the second one is placed 10 pixels lower than the first).
Normally, the second element would be placed on top of the first element, but we
can override this layering by setting the elements' z-index properties.
.under { position: absolute;
<SPAN class="over">
<SPAN class="under">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.over { position: absolute;
top: 165px;
left: 20px;
z-index: 2;
background-color: green
}
top: 175px;
left: 20px;
z-index: 1;
background-color: blue
}
-->
</STYLE>
</HEAD>
<BODY>
This text is positioned 20 pixels from the left and 165 pixels from the top of the window.
</SPAN>
This text is positioned just below the above text, and would usually be placed on top because of its order on the page.
</SPAN>
</BODY>
</HTML>
CSS2's clip, overflow, and visibility features
make it easy to add special effects to your pages. The clip property
lets you reveal overlapped objects, and the overflow property lets
you specify what happens to objects that don't fit into a boundary box with a set
height and width. The visibility property
lets you make objects invisible--it's a great way to have an object flow around
something that's seemingly not there.
In the example below, we've created a span element that calls the hidden
class, which uses the visibility property to hide the text.
You won't see that text in a browser, but you'll notice that the line that follows
it makes room for it on the screen. The next element calls the overflow
class, which, naturally, employs the overflow property.
The tag's bounding box is smaller than its text, so the text is cut off. The last
two elements demonstrate clipping. The last object is placed directly on top of
the one before it, but it's clipped to a smaller size; thus, the previous one shows through.
.overflow { position: absolute;
.plain { position: absolute;
.clip { position: absolute;
<DIV class="overflow">
<DIV class="plain">
<DIV class="clip">
</BODY>
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.hidden { position: relative;
visibility: hidden
}
top: 210px;
left: 60px;
width: 40px;
height: 40px;
background-color: yellow;
overflow: hidden
}
top: 200px;
left: 200px;
width: 150px;
height: 150px;
background-color: #eeeeee;
}
top: 200px;
left: 200px;
width: 150px;
height: 150px;
color: yellow;
background-color: blue;
clip: rect(25px 125px 125px 25px);
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="hidden">
This text is invisible on the page,
</SPAN>
but this text is affected by the invisible item's flow.
This is way too much text for the little box that we've designated. The overflow property will hide it.
</DIV>
This text is covered by the blue square that follows. But because the square is clipped, some of this text shows through.
</DIV>
This text is yellow on a blue square, but it's getting cut off by clipping.
</DIV>
</HTML>
See the W3C's working draft for CSS positioning for all the positioning properties and values.