Positioning with CSS Level 2

by Guest Contributor | Sep 29, 2003 7:45:00 PM

Tags: Guest Contributor

Takeaway: Take a look at Cascading Style Sheets, Level 2 specification, which introduces positioning.

By Matt Rotter, Charity Kahn, and Paul Anderson

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 CSS2 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--for example, to have a top object reveal another one beneath it. Finally, you can make entire objects visible or invisible.

Matt Rotter and Charity Kahn are software engineers for CNET.com.