Z-Index

Utilities for controlling the stack order of an element.

Table of Contents

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

// Standard values
WDiv(className: 'z-0')
WDiv(className: 'z-50')

// Arbitrary values
WDiv(className: 'z-[100]')
WDiv(className: 'z-[-1]')

Basic Usage

Use z-{index} to set the stack order of an element. This utility is primarily used with Stack widgets to determine which element appears on top.

Stack(
  children: [
    WDiv(className: 'z-0 bg-blue-500 w-20 h-20'),
    WDiv(className: 'z-10 bg-red-500 w-20 h-20 ml-10 mt-10'),
    WDiv(className: 'z-20 bg-green-500 w-20 h-20 ml-20 mt-20'),
  ],
)

Quick Reference

Variants

Hover & Focus

Control the stack order on interaction. This is useful for "pop-out" effects where an item should rise above others when hovered.

WDiv(className: 'z-0 hover:z-50 bg-white shadow-sm hover:shadow-xl')

Responsive Design

Apply different z-indices at specific breakpoints using the sm:, md:, lg:, xl:, and 2xl: prefixes.

// z-0 on mobile, z-50 on medium screens and up
WDiv(className: 'z-0 md:z-50')

Dark Mode

Use the dark: prefix to apply specific z-indices when the application is in dark mode.

WDiv(className: 'z-10 dark:z-20')

Arbitrary Values

Use square brackets [] to apply custom z-index values that aren't part of the theme. This supports both positive and negative integers.

// Custom positive value
WDiv(className: 'z-[100]')

// Custom negative value
WDiv(className: 'z-[-5]')

Customizing Theme

To extend or override the default z-index scale, modify the zIndices property in WindThemeData.

WindThemeData(
  zIndices: {
    // Override defaults
    '0': 0,
    '50': 50,
    
    // Add custom values
    '100': 100,
    'modal': 9999,
    'popover': 5000,
  },
)

Usage with custom theme:

WDiv(className: 'z-modal')   // Applies z-index: 9999
WDiv(className: 'z-popover') // Applies z-index: 5000

Related Documentation

• Position
• Display
• WindTheme