Skip to main content

Z-Index Utilities

NuvoUI provides a comprehensive set of z-index utilities that help you control the stacking order of elements on your page. These utilities include both numerical values and semantic named levels for better readability.

Configuration​

The z-index system is built on configurable variables:

Parent Selector​

All z-index utilities are scoped under the VAR.$parent-selector which can be configured.

Z-Index Values​

The system uses a set of predefined z-index values:

Named Z-Index Levels​

The system also provides semantic named levels for better readability:

Breakpoints​

Responsive variants are based on these breakpoint values:

Basic Usage​

Apply z-index values using the .z-{value} utilities:

Numerical Z-Index Utilities​

Use numerical z-index values for fine-grained control:

Named Z-Index Utilities​

Use semantic named z-index levels for better readability and maintainability:

Auto Z-Index​

Use z-auto to reset to the browser's automatic stacking:

Responsive Z-Index​

Apply different z-index values at different breakpoints by adding the @{breakpoint} suffix:

Common UI Patterns​

Toast Notifications​

Z-Index Utilities Reference Table​

Numerical Z-Index Classes​

ClassCSS PropertyDescription
.z-autoz-index: autoBrowser determines stacking order
.z-0z-index: 0Z-index of 0
.z-10z-index: 10Z-index of 10
.z-20z-index: 20Z-index of 20
.z-30z-index: 30Z-index of 30
.z-40z-index: 40Z-index of 40
.z-50z-index: 50Z-index of 50
.z-60z-index: 60Z-index of 60
.z-70z-index: 70Z-index of 70
.z-80z-index: 80Z-index of 80
.z-90z-index: 90Z-index of 90
.z-100z-index: 100Z-index of 100
.z-200z-index: 200Z-index of 200
.z-500z-index: 500Z-index of 500
.z-1000z-index: 1000Z-index of 1000

Named Z-Index Classes​

ClassCSS PropertyDescription
.z-basez-index: 0Base level (default stacking context)
.z-hoverz-index: 10For hover states and active elements
.z-dropdownz-index: 100For dropdown menus and popovers
.z-stickyz-index: 200For sticky elements like headers
.z-fixedz-index: 300For fixed position elements
.z-drawerz-index: 400For slide-out drawers and side panels
.z-modalz-index: 500For modal dialog content
.z-popoverz-index: 600For popovers and tooltips
.z-tooltipz-index: 700For tooltips
.z-overlayz-index: 800For modal backdrops and overlays
.z-toastz-index: 900For toast notifications
.z-maxz-index: 9999Maximum z-index (for critical UI)

Responsive Classes​

Add @{breakpoint} suffix to any z-index class to apply it at a specific breakpoint:

  • .z-10@sm
  • .z-dropdown@md
  • .z-sticky@lg
  • .z-overlay@xl

SCSS Mixins​

NuvoUI provides a comprehensive set of z-index mixins for use in your SCSS:

Main Z-Index Mixin​

MixinParametersDescription
@include z-index($value)$value: Z-index value or keySets z-index from predefined maps or direct value

Named Z-Index Mixins​

MixinDescription
@include z-baseSets z-index for base elements (0)
@include z-hoverSets z-index for hover states (10)
@include z-dropdownSets z-index for dropdowns (100)
@include z-stickySets z-index for sticky elements (200)
@include z-fixedSets z-index for fixed elements (300)
@include z-overlaySets z-index for overlays (400)
@include z-drawerSets z-index for drawers (500)
@include z-modalSets z-index for modals (600)
@include z-popoverSets z-index for popovers (700)
@include z-tooltipSets z-index for tooltips (800)
@include z-toastSets z-index for toasts (900)
@include z-maxSets z-index to maximum value (9999)
@include z-autoSets z-index to auto

Example SCSS Usage​

Best Practices​

Consistent Z-Index Scale​

  • Use the named z-index values whenever possible for semantic meaning
  • Stick to the predefined z-index scale to maintain consistency
  • Avoid arbitrary values like z-index: 99999 that can lead to "z-index wars"

Component-Based Approach​

  • Consider the UI component hierarchy when assigning z-index values
  • Use the lowest possible z-index value needed for your use case
  • Organize components into meaningful stacking layers:
    • Content (z-base)
    • UI controls (z-dropdown, z-sticky)
    • Overlays and modals (z-overlay, z-modal)
    • Notifications (z-toast)

Scoping Z-Index Contexts​

Remember that z-index only works on positioned elements (position: relative, absolute, fixed, sticky) and within stacking contexts:

Responsive Considerations​

  • Use responsive z-index utilities when elements need different stacking order on different devices
  • Consider how overlapping elements behave across different screen sizes