Use our low-level z-index utilities to quickly change the stack level of an element or component.
<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>