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

ClassResult
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
99
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>