Using Z-index

The CSS z-index property often trips up both new and experienced developers. The aim of this article is to boil down a somewhat-complex specification to three 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, fixed or whatever, any z-index value is ignored.

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.

So there has to be a position property.

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

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 weird at first. Almost anything that renders content before it's displayed gets a z-index value, for example opacity 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.
More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More >

A Responsive Text Input Form Field

When most people want a responsive text input form field they wrap it in a div. There's a more concise way.

More >