W3CoreUI

Z-index.

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

Example

Use z-index utilities to stack elements on top of one another. Requires a position value other than static, which can be set with custom styles or using our position utilities.

We call these “low-level” z-index utilities because of their default values of -1 through 3, which we use for the layout of overlapping components. High-level z-index values are used for overlay components like modals and tooltips.

z-3

z-2

z-1

z-0

z-n1


<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>

Z-index.

On this page

Example