Tailwind CSS Course
Tailwind CSS
/
Beginner

z-index

Definition

Utilities for controlling the stack order (depth) of positioned elements.

Explain Like I'm New

The 3D depth of your website. If a Modal pops up, it needs to be 'closer' to the user's face than the background. Higher numbers are closer. `z-50` will cover `z-10`.

Real World Example

Ensuring a dropdown menu (`z-10`) drops down OVER the text below it, rather than slipping underneath the text.

Common Use Cases

  • •Modals
  • •Dropdowns
  • •Sticky Headers
  • •Tooltips

Interactive Example

 Interview Questions
basic
  • What is the highest default `z-index` class provided by Tailwind?
intermediate
  • If Element A is `z-50`, but its parent is `z-0`, can Element A cover Element B which is `z-10`?
Flash Cards
Question
Highest default?
Click to reveal answer
Answer
`z-50`
Question
Can it cover?
Click to reveal answer
Answer
No. This is called 'Stacking Context'. If a parent is trapped at `z-0`, all of its children are trapped in that layer. A child `z-50` only means it is the highest element *within that parent's layer*.