Z-Index

This is, according to some, one of the most misunderstood concepts in CSS. For the life of me though I can’t see why that is!

Z-index Stack

The general concept of z-index is fairly straightforward. You have X and Y, controlling the width and height. The Z-axis then is the depth. That is to say the order of elements in a stack.

Put simply, this of Photoshop and how you use layers. You put layers on top of each or under each other. These can have different effects, but the gist is the same.

In CSS, z-index says whether an object is on top or below an element. For example, if you had a box and an image on top of that box, it would be above the image. Therefore, it would have a higher z-index. It would be higher in the stack.

Z-indexed elements should start at around 1,000 for the first object and then 2,000 onwards. Incrementing by 1,000 can help avoid some issues with the construct of the property. Which is to say that by default, it displays as 1 and doesn’t always translate properly — or like you’d expect.

For a more visual look at the z-index, then you can see Chris Coyer’s screen cast. You can also read a great article on Smashing Magazine.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s