Z-Index

Atomic z-index classes allow you to change an element’s z-index quickly.

Classes

Class Output
.z-hide z-index: -1;
.z-base z-index: 0;
.z-selected z-index: 25;
.z-active z-index: 50;
.z-nav z-index: 1000;
.z-nav-fixed z-index: 1050;
.z-dropdown z-index: 2000;
.z-popover z-index: 3000;
.z-tooltip z-index: 4000;
.z-banner z-index: 5000;
.z-modal-bg z-index: 8050;
.z-modal z-index: 9000;

Examples

1
2
3
4
5
6
7
8
9
10
11
12
<div class="z-base"></div>
<div class="z-hide"></div>
<div class="z-selected"></div>
<div class="z-active"></div>
<div class="z-nav"></div>
<div class="z-nav-fixed"></div>
<div class="z-dropdown"></div>
<div class="z-popover"></div>
<div class="z-tooltip"></div>
<div class="z-banner"></div>
<div class="z-modal-bg"></div>
<div class="z-modal"></div>
.z-base
.z-hide
.z-selected
.z-active
.z-nav
.z-nav-fixed
.z-dropdown
.z-popover
.z-tooltip
.z-banner
.z-modal-bg
.z-modal