Make your own free website on Tripod.com

Cascading Style Sheet Level 2 - CSS 2

Positioning with CSS 2

The Cascading Style Sheets Level 2 specification introduces positioning, which opens up a whole new level of control over Web page layout. Instead of building awkward tables to arrange objects on the page, you can place each object exactly where you want it. While no browsers completely support CSS 2 yet, the 4.0 and later versions of Navigator, Internet Explorer, and Opera already support CSS positioning.

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.

Position HTML Elements

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">
This text is offset from the above line--50 pixels on top and 25 pixels on the left.
</SPAN>

See example in action

Layer Positioned Content

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.

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.over { position: absolute;
     top: 165px;
     left: 20px;
     z-index: 2;
     background-color: green
     }

.under { position: absolute;
     top: 175px;
     left: 20px;
     z-index: 1;
     background-color: blue
     }
-->
</STYLE>
</HEAD>
<BODY>

<SPAN class="over">
This text is positioned 20 pixels from the left and 165 pixels from the top of the window.
</SPAN>

<SPAN class="under">
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

Hide and Clip Positioned Content

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.

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.hidden { position: relative;
     visibility: hidden
     }

.overflow { position: absolute;
     top: 210px;
     left: 60px;
     width: 40px;
     height: 40px;
     background-color: yellow;
     overflow: hidden
     }

.plain { position: absolute;
     top: 200px;
     left: 200px;
     width: 150px;
     height: 150px;
     background-color: #eeeeee;
     }

.clip { position: absolute;
     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.

<DIV class="overflow">
This is way too much text for the little box that we've designated. The overflow property will hide it.
</DIV>

<DIV class="plain">
This text is covered by the blue square that follows. But because the square is clipped, some of this text shows through.
</DIV>

<DIV class="clip">
This text is yellow on a blue square, but it's getting cut off by clipping.
</DIV>

</BODY>
</HTML>

See example in action

See the W3C's working draft for CSS positioning for all the positioning properties and values.


go to the top of this document