Using Z-Index to Stack Design Elements

This is a really important little trick to know when you’re getting into using css and positioning divs.  Sometimes you may be surprised by a flash element staying on top of your dropdown menu for example.  This has to do with the z-index tag in css.  In order to set the z-index, you must first set the position property.

Here’s an example of setting the z-index:
#yourID {
position:relative;
z-index:100;
}

The above example sets the z-index to 100. The higher the number, the further up the stack the element is layered. If you wanted another element underneath the one above, you could achieve that by setting it’s z-index to 99. It doesn’t matter what method of positioning you use. You could use absolute, static, fixed, or relative. It’s only important that there is some sort of positioning defined, or the z-index will do nothing.

Here’s an example of what wouldn’t work:
#yourID {
z-index:100;
}

Hope this helped shed some light on the z-index property. Feel free to post any questions below.

Comments

comments

Tags: , ,