Cascading Style Sheet Positioning (CSSP)

Cascading Style Sheet Positioning is totally awesome! (Ok, well it was when I originally wrote this article back in 1999.) With CSSP, you can position text over an image. Try doing that with HTML where just positioning text and images on a web page is a pain. We have to use tables and invisible spacer GIFs. Even then there's no guarantee we'll get what we wanted because of all the variations in browsers and platforms.

With CSSP, you can precisely position an element using exact pixel coordinates. Plus, you can layer positioned elements on top of each other and control what's on top. If you want to get fancy, you can use JavaScript with CSSP to create a little animation.

Please note: I do not recommend using absolute positioning for laying out entire web documents. I believe absolute positioning is best used to solve select problems that can't be resolved otherwise without resorting to complicated table layouts.

Examples:

The following examples will load in a separate document so that you can easily view only the source code that is relevant.

• Absolute Positioning
  • of Text
  • of Text Over a Graphic
  • Text over a graphic a little more neatly.
  • Absolutely position anything!
• Relative Positioning
  • Positioning Text using DIV
  • Positioning Text Relatively
  • Be Careful
• Controlling Positioned Elements
  • Controlling Width
  • Layering Text
  • Layering Text and Images
• Getting Fancy
  • Moving Arrow Example with CSSP - DOM2

References:

Positioning HTML Elements with Cascading Style Sheets

W3C's page on CSSP.

Copyright © 1997-99 by Tina McDuffie