Glossary

Z-Index

TL;DR

Z-index is a CSS property that controls the stacking order of positioned elements, determining which elements appear in front of or behind others in the visual hierarchy.

Concept

Z-index is a CSS property that controls the stacking order of positioned HTML elements along the z-axis (depth axis), determining which elements appear in front of or behind others in the visual hierarchy of a web page. Elements with a higher z-index value appear in front of elements with lower values.

Key characteristics of z-index include:

  1. Positioning Requirement: Z-index only works on positioned elements (those with position values other than static, such as relative, absolute, fixed, or sticky).

  2. Stacking Context: Z-index values are evaluated within stacking contexts, which can be created by various CSS properties and element types.

  3. Integer Values: Z-index accepts integer values (positive, negative, or zero) that determine the stacking order.

  4. Default Behavior: Elements with the same z-index stack according to their position in the HTML document (later elements appear on top).

Z-index values:

  • Positive integers: Higher values bring elements forward
  • Negative integers: Lower values push elements backward
  • Zero (default): Default stacking order based on document position
  • Auto: Creates a new stacking context with z-index 0

Stacking context creation: Z-index creates a new stacking context when its value is not auto. Other properties that create stacking contexts include:

  • opacity less than 1
  • transform other than none
  • filter other than none
  • will-change with properties that create stacking contexts

Common z-index use cases:

  • Modal dialogs and popups
  • Dropdown menus
  • Tooltips
  • Navigation overlays
  • Fixed headers and footers
  • Image galleries with overlays

Best practices for z-index:

  • Use a consistent z-index scale (e.g., 10, 20, 30, 100, 1000)
  • Create a CSS architecture that defines z-index values for different component types
  • Avoid excessively high values (99999) which can cause maintenance issues
  • Understand stacking contexts to avoid unexpected layering behavior
  • Use developer tools to inspect and debug stacking order issues

Understanding z-index is essential for creating complex web layouts with overlapping elements, ensuring proper visual hierarchy and user experience.

Related words: DNS GraphQL HTTP