The really simple guide to z-index

Easing your z-index pain

The really simple guide to z-index

24th July, 2014
Tags: Blog, CSS
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.

Elsewhere on Tipue

Tipue Search
jQuery

Tipue Search

Tipue Search is a site search engine jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
Tipr, a small and simple jQuery tooltip plugin
CSS
Beaty, a themed responsive CSS grid
The complete guide to centering a div
HTML5
Native HTML5 autocomplete with input list
© 2015, Tipue. Made in London.
PRIVACY
T&Cs