Cirrus

#Z-Index

New
0.7.0

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

ClassStyles
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

#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 u-z-20-lg class.

<div class="u-z-20-lg">
    <!-- ... -->
</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.