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

extends	title
_layouts.markdown	Z-Index

Z-Index

Utilities for controlling the stack order of an element.

Responsive Customizing

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