Skip to main content


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

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;
<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>
Deploys by Netlify