Z-Index

These utility classes control the stacking order within the DOM. Adding a z-{value} class to your element will change its order in the stack.

Class

Class	Result
`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-10`	`z-index: -10`
`-z-20`	`z-index: -20`
`z-auto`	`z-index: auto`

Demo

z-30

z-40

z-50

z-40

z-30

Markup

<div class="pos-rel z-30">
  z-30
</div>
<div class="pos-rel z-40">
  z-40
</div>
<div class="pos-rel z-50">
  z-50
</div>
<div class="pos-rel z-40">
  z-40
</div>
<div class="pos-rel z-30">
  z-30
</div>

Using Data Attributes

Requires JavaScript

Can’t find the value you need in the list above? You can add a data-z="{value}" to your element and let javascript handle the rest.

Demo

Markup

<div class="pos-rel" data-z="31">
  31
</div>
<div class="pos-rel" data-z="60">
  60
</div>
<div class="pos-rel" data-z="999">
  999
</div>
<div class="pos-rel" data-z="10">
  10
</div>
<div class="pos-rel" data-z="1">
  1
</div>