Question 1

What is CSS z-index?

Accepted Answer

CSS z-index controls the vertical stacking order of positioned elements. Elements with a higher z-index appear in front of those with a lower z-index when they overlap.

Question 2

Why does my z-index not work?

Accepted Answer

z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). Elements with position: static ignore the z-index property.

Question 3

What is a stacking context?

Accepted Answer

A stacking context is an element that creates its own stacking layer. Children of a stacking context are stacked relative to their parent, not the overall document. Properties like opacity < 1, transform, and filter create new stacking contexts.

Question 4

What are common z-index values used in UI?

Accepted Answer

Common values: 0 for base content, 10-100 for cards and dropdowns, 1000 for modals and overlays, 9999 for tooltips and notifications, and 99999 for critical elements like cookie banners.

Question 5

Should I use very high z-index values like 9999999?

Accepted Answer

No. Using arbitrarily high z-index values makes maintenance difficult. Instead, define a z-index scale in your design system (e.g., 10, 100, 200, 500, 1000) and stick to it consistently.

Z-Index Manager

Layer List

Preview

Frequently Asked Questions

Comments & Feedback