Z-index and Layering with CSS

Why give a hoot about z-index?

edit source

Agenda

What's z-index used for?

Z-index changes stacking order and creates a stacking context.

Normal document flow

Layering without positioning

Edit Source

What is positioned?

z-index applies only to objects that have the position property set to fixed, absolute, or relative, aka "positioned elements".

On positioned elements, can use top/left/right/bottom to nudge element to corners, and z-index.

position: fixed;

Edit source

position: absolute;

Edit source

position: relative;

Edit source

Default stacking order

default Stacking order

Stacking order with z-index

Stacking order with z-index

Change layering with CSS only

Edit source.

Why does z-index 'not work?'

Edit source.

Answer: stacking context on div#3

Stacking context is a group of elements with a common parent that move forward or backward together (atomically) in the stacking order.

Stacking Context vs DOM

Stacking context is a subset of DOM.

Which CSS properties create stacking context?

See the Pen CSS(webkit) filters by Rıza Selçuk Saydam (@rss) on CodePen.

CSS Filter creates a stacking context

Edit source

See the Pen Opacity : CSS-Tricks Almanac by Dennis Gaebel (@grayghostvisuals) on CodePen.

Opacity < 1 creates a stacking context

Edit source

Position: fixed on Chrome creates a stacking context

Edit source

See the Pen CSS 3D Transform - Card Flip by Adrian Parr (@adrianparr) on CodePen.

Transform other than none creates stacking context

Edit source

See the Pen pIgBf by Louis Lazaris (@impressivewebs) on CodePen.

Transform-style: preserve-3d creates a stacking context

Edit source

See the Pen GLbca by Hugo Giraudel (@HugoGiraudel) on CodePen.

CSS Perspective creates a stacking context

Edit source

Recap: stacking context vs stacking order

Troubleshooting CSS layering issues

CSS properties that cause stacking context