x Close
Home
About
jQuery plugins
Blog
The really simple guide to z-index

The really simple guide to z-index

24th July, 2014 / Tipue blog
The CSS z-index property often trips up new and even experienced developers. The aim of this article is to boil down a somewhat-complex specification to 3 major points, which should ease most z-index pain.

There has to be a position property

This is problem number one, and fixes most issues with z-index. If an element doesn't have a position property, such as absolute, relative or fixed, any z-index value is ignored.

In short, the default value of the position property is static, and static elements don't have a z-index value, beyond the order in which they're displayed.

There's something called the stacking order

The stacking order is simple, as long as you understand how it works. Block 1 and everything within it has a z-index, as does everything within block 2.

An element that has a higher z-index in block 2 doesn't appear above anything in block 1 if block 1 (as a whole) has a higher z-index. This probably needs an example.

CSS
HTML
Example
block-2 displays in front of everything in block-1, including inner-block.

Things that render get a z-index

Now for something that seems rather odd at first. Almost anything that renders content before it's displayed gets a z-index value; for example opacity, filters and transform. Normally this wouldn't be a problem, but could cause unexpected results, say, if you're expecting an element with an opacity property to appear behind another element.

Related articles

The complete guide to centering a div
The complete guide to fixed divs

Free jQuery plugins

Tipue Search, a site search engine jQuery plugin
Tipr, a small and simple jQuery tooltip plugin
© 2014, Tipue. Made in London. TOS