Z-Index

vel-src: layout.css

Utilities for controlling the stack order of an element.

Class	Properties
vel-z-0	z-index: 0
vel-z-10	z-index: 10
vel-z-20	z-index: 20
vel-z-30	z-index: 30
vel-z-40	z-index: 40
vel-z-50	z-index: 50
vel-z-auto	z-index: auto

Examples

Z-index stacking

z-10

z-20

z-30

example.html

<div class="vel-relative" style="height:100px">
  <div class="vel-absolute vel-z-10 vel-bg-primary vel-text-white vel-rounded-lg vel-flex vel-items-center vel-justify-center" style="left:0;top:0;width:80px;height:80px;font-size:12px">z-10</div>
  <div class="vel-absolute vel-z-20 vel-bg-success vel-text-white vel-rounded-lg vel-flex vel-items-center vel-justify-center" style="left:40px;top:10px;width:80px;height:80px;font-size:12px">z-20</div>
  <div class="vel-absolute vel-z-30 vel-bg-danger vel-text-white vel-rounded-lg vel-flex vel-items-center vel-justify-center" style="left:80px;top:20px;width:80px;height:80px;font-size:12px">z-30</div>
</div>