Z-Index
@include('_partials.class-table', [ 'rows' => [ [ '.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')
Responsive
To control the z-index of an element at a specific breakpoint, add a {screen}: 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')
Customizing
Z-Index scale
By default Tailwind provides six numeric z-index utilities and an auto utility. You change, add, or remove these by editing the theme.zIndex section of your Tailwind config.
@component('_partials.customized-config', ['key' => 'theme.zIndex']) '0': 0,
- '10': 10,
- '20': 20,
- '30': 30,
- '40': 40,
- '50': 50,
- '25': 25,
- '50': 50,
- '75': 75,
- '100': 100, 'auto': 'auto', @endcomponent
Negative values
If you'd like to add any negative z-index classes that take the same form as Tailwind's negative margin classes, prefix the keys in your config file with a dash:
@component('_partials.customized-config', ['key' => 'theme.zIndex'])
- '-10': '-10', @endcomponent
Tailwind is smart enough to generate classes like -z-10 when it sees the leading dash, not z--10 like you might expect.
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'z-index', 'property' => 'zIndex', ], 'variants' => [ 'responsive', ], ])
