Back to Entry Page

Z-Index Stacking with CSS

Stacked version

The image above shows a page constructed using Cascading Style Sheets. Each of the overlapping rectangles is a block-level element (a DIV) with absolute positioning offset both in height and width and with the z-index property set to progressively higher values to create a stack.

I cooked up this fairly extravagant example of CSS three years ago for a class exercise. At the time it only worked reliably in one browser--Microsoft Internet Explorer 5.0. Today more browsers will support its special effects, but not all--so unfortunately you'll have to wait a few more years before you can build such tricks into all your Web pages.

The full example contains more than just the CSS tricks; there are also some interesting JavaScript manipulations. Follow the links below if you're curious.


University of Baltimore Logo

Copyright © 2004 School of Information Arts and Technologies