Z-index

Use our low-level z-index utilities to quickly change the stack level of an element or component.

On this page

Examples

z-3
z-2
z-1
z-0
z-n1
vue
<template>
  <b-div
    z="3"
    position="absolute"
    padding="5"
    rounded="3"
  >
    <span>z-3</span>
  </b-div>
  <b-div
    z="2"
    position="absolute"
    padding="5"
    rounded="3"
  >
    <span>z-2</span>
  </b-div>
  <b-div
    z="1"
    position="absolute"
    padding="5"
    rounded="3"
  >
    <span>z-1</span>
  </b-div>
  <b-div
    z="0"
    position="absolute"
    padding="5"
    rounded="3"
  >
    <span>z-0</span>
  </b-div>
  <b-div
    z="n1"
    position="absolute"
    padding="5"
    rounded="3"
  >
    <span>z-n1</span>
  </b-div>
</template>