tailwindcss/docs/source/z-index.blade.md

extends	title
_layouts.markdown	Z-Index

Z-Index

Utilities for controlling the stack order of an element.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.z-0	z-index: 0;	Set the z-index of the element to 0.
.z-10	z-index: 10;	Set the z-index of the element to 10.
.z-20	z-index: 20;	Set the z-index of the element to 20.
.z-30	z-index: 30;	Set the z-index of the element to 30.
.z-40	z-index: 40;	Set the z-index of the element to 40.
.z-50	z-index: 50;	Set the z-index of the element to 50.
.z-auto	z-index: auto;	Don't create a new stacking context.

Usage

Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the .z-{index} utilities.

@component('_partials.code-sample')

z-40

z-30

z-20

z-10

z-0

@slot('code')

z-40

z-30

z-20

z-10

z-0

@endslot @endcomponent

Responsive

To control the z-index of an element at a specific breakpoint, add a {breakpoint}: prefix to any existing z-index utility. For example, use md:z-50 to apply the z-50 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('sm')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('md')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('lg')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('xl')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @slot('code')

yellow

z-40

z-30

z-20

z-10

z-0

@endslot @endcomponent

Customizing

By default Tailwind provides six numeric z-index utilities and an auto utility. You change, add, or remove these by editing the zIndex section of your Tailwind config.

@component('_partials.customized-config', ['key' => 'zIndex']) '0': 0,

• '10': 10,
• '20': 20,
• '30': 30,
• '40': 40,
• '50': 50,

• '25': 25,
• '50': 50,
• '75': 75,
• '100': 100, 'auto': 'auto', @endslot