Skip to Main Content
Cascading Style Sheets: The Definitive Guide
book

Cascading Style Sheets: The Definitive Guide

by Eric A. Meyer
May 2000
Intermediate to advanced content levelIntermediate to advanced
472 pages
14h 17m
English
O'Reilly Media, Inc.
Content preview from Cascading Style Sheets: The Definitive Guide

Stacking Positioned Elements

With all of the positioning going on, there will inevitably be a situation where two elements will try to exist in the same place, visually speaking. Obviously, one of them will have to overlap the other—but how do we control which one comes out “on top”?

This is where z-index comes in.

z-index allows the author to alter the way in which elements overlap each other It takes its name from the coordinate system in which side-to-side is the x-axis and top-to-bottom is the y-axis. In such a case, the third axis—that runs from front to back, or if you prefer, closer to further away from the user—is termed the z-axis. Thus, elements are given values along this axis and are represented using z-index. Figure 9-26 illustrates this system.

A conceptual view of z-index stacking

Figure 9-26. A conceptual view of z-index stacking

In this coordinate system, an element with a high z-index value is closer to the reader than those with lower z-index values. This will cause the high-value element to overlap the others, as illustrated in Figure 9-27. This is referred to as stacking.

How the elements are stacked

Figure 9-27. How the elements are stacked

Any integer can be used as a value for z-index, including negative numbers. Assigning an element a negative ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Cascading Style Sheets: The Definitive Guide, Second Edition

Cascading Style Sheets: The Definitive Guide, Second Edition

Eric A. Meyer
CSS Mastery: Advanced Web Standards Solutions

CSS Mastery: Advanced Web Standards Solutions

Andy Budd, Simon Collison, Cameron Moll

Publisher Resources

ISBN: 1565926226Catalog PageErrata