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.
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>
see example in action
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">
see example in action
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>
see example in action
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 example in action
See the W3C's working draft for CSS positioning for all the positioning properties and values.