Tipue London





The really simple guide to z-index

Easing your z-index pain

The really simple guide to z-index

July 24, 2014
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.


See the Pen An example of z-index and stacking order by Steve Pear () on CodePen.

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.
© 2017, Tipue. Made in London.
Privacy  T&Cs