HTML Utopia: Designing Without Tables Using CSS

6.3. The z-Index Property and Overlapping Content

By default, HTML elements on a Web page will be placed by the browser so that they all sit neatly—or messily, depending on how good a designer you are—next to each other on the page. CSS positioning, as we have just seen, raises the possibility of overlapping content. Whenever elements overlap, there is a question of which element should be drawn "on top of" the other. You can think of overlapping elements as squares of paper glued to the user's screen. When these squares overlap, you need to decide in what order they should be stuck to the screen. The position of an element within this stacking (or sticking!) order is called it's z-index. An element with a higher z-index will be drawn on top ...