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-dropdown`	`z-index: 1000;`
`.z-popover`	`z-index: 2000;`
`.z-tooltip`	`z-index: 3000;`
`.z-banner`	`z-index: 4000;`
`.z-nav`	`z-index: 5000;`
`.z-nav-fixed`	`z-index: 5050;`
`.z-modal-bg`	`z-index: 8050;`
`.z-modal`	`z-index: 9000;`

Examples

<div class="z-base">…</div>
<div class="z-hide">…</div>
<div class="z-selected">…</div>
<div class="z-active">…</div>
<div class="z-dropdown">…</div>
<div class="z-popover">…</div>
<div class="z-tooltip">…</div>
<div class="z-banner">…</div>
<div class="z-nav">…</div>
<div class="z-nav-fixed">…</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