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-{index}	z-index: {index};	Set the z-index of the element to the given value.
.z-0	z-index: 0;	Set the z-index of the element to the given value.
.z-10	z-index: 10;	Set the z-index of the element to the given value.
.z-20	z-index: 20;	Set the z-index of the element to the given value.
.z-30	z-index: 30;	Set the z-index of the element to the given value.
.z-40	z-index: 40;	Set the z-index of the element to the given value.
.z-50	z-index: 50;	Set the z-index of the element to the given value.
.z-auto	z-index: auto;	Don't create a new stacking context.

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 a sensible numeric z-index scale. You can, of course, modify these values as needed. This is done in the zIndex section of your Tailwind config.

@component('_partials.customized-config') @slot('default') { // ... zIndex: { '0': 0, '10': 10, '20': 20, '30': 30, '40': 40, '50': 50, 'auto': 'auto', }, } @endslot @slot('customized') { // ... zIndex: { '0': 0, '10': 10, '20': 20, '30': 30, '40': 40, '50': 50, '60': 60, '70': 70, '80': 80, '90': 90, '100': 100, 'auto': 'auto', }, } @endslot @endcomponent