Z-Index

Utilities for controlling the stack order of an element.

Default class reference

Class
Properties
z-0z-index: 0;
z-10z-index: 10;
z-20z-index: 20;
z-30z-index: 30;
z-40z-index: 40;
z-50z-index: 50;
z-autoz-index: auto;

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.

Z-Index - 图1

  1. <div class="z-40 ...">5</div>
  2. <div class="z-30 ...">4</div>
  3. <div class="z-20 ...">3</div>
  4. <div class="z-10 ...">2</div>
  5. <div class="z-0 ...">1</div>

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.

  1. <div class="z-0 md:z-50 ...">
  2. <!-- ... -->
  3. </div>

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

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.

  1. // tailwind.config.js
  2. module.exports = {
  3. theme: {
  4. zIndex: {
  5. '0': 0,
  6. - '10': 10,
  7. - '20': 20,
  8. - '30': 30,
  9. - '40': 40,
  10. - '50': 50,
  11. + '25': 25,
  12. + '50': 50,
  13. + '75': 75,
  14. + '100': 100,
  15. 'auto': 'auto',
  16. }
  17. }
  18. }

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:

  1. // tailwind.config.js
  2. module.exports = {
  3. theme: {
  4. extend: {
  5. zIndex: {
  6. + '-10': '-10',
  7. }
  8. }
  9. }
  10. }

Tailwind is smart enough to generate classes like -z-10 when it sees the leading dash, not z--10 like you might expect.

Variants

By default, only responsive, focus-within and focus variants are generated for z-index utilities.

You can control which variants are generated for the z-index utilities by modifying the zIndex property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:

  1. // tailwind.config.js
  2. module.exports = {
  3. variants: {
  4. extend: {
  5. // ...
  6. + zIndex: ['hover', 'active'],
  7. }
  8. }
  9. }

Disabling

If you don’t plan to use the z-index utilities in your project, you can disable them entirely by setting the zIndex property to false in the corePlugins section of your config file:

  1. // tailwind.config.js
  2. module.exports = {
  3. corePlugins: {
  4. // ...
  5. + zIndex: false,
  6. }
  7. }

←Visibility   Flex Direction→