Skip to main content

Z-Index Management

Description​

Elevate Web introduces a structured approach to managing z-index values, making layer organization more intuitive and consistent. By assigning semantic meanings to z-index values (inspired on Managing CSS Z-Index In Large Projects), we aim to resolve these common challenges:

  • Avoid arbitrary values: People often choose arbitrarily large z-index values.
  • Prevent cascading bugs: Z-Index bug fixes often result in a new z-index bug.
  • Improved traceability: The relationship between z-index values is difficult to trace.

Usage​

All z-index variables are declared under globals.css, with predefined base values that simplify stack management. These variables enable clear, semantic organization of layers. For example:

  • --z-page-content: Content above the base page layer.
  • --z-interactive: Interactive elements like menus or hero details above content layers.

Variables:​

:root {
  --default: 0;
  --above: 1; /* All values above the default/base layer */
  --below: -1; /* All values below the default/base layer */

  --z-page-content: calc(var(--above) + var(--default));
  --z-interactive: calc(var(--above) + var(--z-page-content));
}

Applying a variable:​

.hero-details {
  z-index: var(--z-page-content);
}

Always use semantic variables instead of hardcoded z-index values. This ensures consistent layer management and prevents conflicts across components. If a new layer is needed, define a corresponding semantic variable in globals.css to maintain traceability.