#Z-Index

New

0.7.0

These are utility classes that specify the z-index of elements.

Class	Styles
`u-z-0`	`z-index: 0 !important`
`u-z-1`	`z-index: 1 !important`
`u-z-10`	`z-index: 10 !important`
`u-z-20`	`z-index: 20 !important`
`u-z-30`	`z-index: 30 !important`
`u-z-40`	`z-index: 40 !important`
`u-z-50`	`z-index: 50 !important`
`u-z-n1`	`z-index: -1 !important`

Supported Pseudo-Variants

New

0.8.0

active

checked

dark

disabled

first-of-type

focus

focus-visible

focus-within

group-focus

group-hover

hover

landscape

last-of-type

light

portrait

reduce-motion

responsive

visited

See more pseudo-variants.

#Examples

Below is a demo of all supported z-index utility classes.

50

40

30

20

10

1

0 -1

The div with u-z-n1 is up there somewhere.

And of course...

auto

<div class="u-z-50 ...">50</div>
<div class="u-z-40 ...">40</div>
<div class="u-z-30 ...">30</div>
<div class="u-z-20 ...">20</div>
<div class="u-z-10 ...">10</div>
<div class="u-z-1 ...">1</div>
<div class="u-z-0 ...">0</div>
<div class="u-z-n1 ...">-1</div>
<div class="u-z-auto ...">auto</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.
//_configs.scss
$config: (
    viewports: (
        flags.$ZINDEX: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-z-20 to be applied to some element for lg and above, then I would use the lg:u-z-20 class.

<div class="lg:u-z-20">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting z-indexes. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        z-index: (
            25: 25,
            75: 75,
        )
    )
) !default;

This would generate the following classes.

.u-z-25 {
    z-index: 25 !important;
}
.u-z-75 {
    z-index: 75 !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.

Cirrus