Z-Index

Utilities for controlling the stack order of an element.

Usage .z-{ index }

Control the stack order (or three-dimensional positioning) of an element, regardless of it’s order in the HTML.

• z-50
• z-40
• z-30
• z-20
• z-10
• z-auto

<div class="absolute z-50">z-50</div>
<div class="absolute z-40">z-40</div>
<div class="absolute z-30">z-30</div>
<div class="absolute z-20">z-20</div>
<div class="absolute z-10">z-10</div>
<div class="absolute z-auto">z-auto</div>

Default Classes

The following classes can be overridden by changing the default values of $z-indexes variable.

.z-0 { z-index: 0 }
.z-10 { z-index: 10 }
.z-20 { z-index: 20 }
.z-30 { z-index: 30 }
.z-40 { z-index: 40 }
.z-50 { z-index: 50 }
.z-60 { z-index: 60 }
.z-70 { z-index: 70 }
.z-80 { z-index: 80 }
.z-90 { z-index: 90 }
.z-100 { z-index: 100 }
.z-200 { z-index: 200 }
.z-auto { z-index: auto }

• Gzipped Size 91 B
• Declarations 13
• Selectors 13