Z-Index

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

31
60
999
10
1

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>