Tutorials


Z-Index Utilities in Tailwind CSS


Z-Index Utilities in Tailwind CSS

The z-index property in CSS controls the stacking order of elements that overlap. Elements with a higher z-index value are stacked above those with a lower value. Tailwind CSS provides utilities to easily manage the z-index of elements, helping you control which elements appear on top of others.

1. Basic Z-Index Utilities

Tailwind CSS provides a set of predefined z-index utilities that you can use to control stacking order.

Utility Classes

  • z-{value}: Applies a specific z-index value.

Predefined Values

Tailwind CSS includes a range of predefined values for z-index, typically used for common layering scenarios:

  • z-0: Sets z-index to 0.
  • z-10: Sets z-index to 10.
  • z-20: Sets z-index to 20.
  • z-30: Sets z-index to 30.
  • z-40: Sets z-index to 40.
  • z-50: Sets z-index to 50.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-Index Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="relative z-10 bg-blue-500 text-white p-4">
    Element with z-index 10
  </div>
  <div class="relative z-20 bg-red-500 text-white p-4">
    Element with z-index 20
  </div>
</body>
</html>

In this example:

  • The blue div has a z-index of 10, and the red div has a z-index of 20.
  • The red div will be stacked above the blue div due to its higher z-index value.

2. Custom Z-Index Values

You can also define custom z-index values by extending the theme in the tailwind.config.js file. This allows you to use any z-index value you need.

Configuration

Add custom z-index values in the extend section of the theme in tailwind.config.js.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      zIndex: {
        '60': '60',
        '70': '70',
      },
    },
  },
};

Using Custom Values

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Z-Index Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="relative z-60 bg-blue-500 text-white p-4">
    Element with custom z-index 60
  </div>
  <div class="relative z-70 bg-red-500 text-white p-4">
    Element with custom z-index 70
  </div>
</body>
</html>

In this example:

  • The blue div has a custom z-index of 60, and the red div has a custom z-index of 70.
  • The red div will be stacked above the blue div due to its higher z-index value.

3. Z-Index and Positioning

For the z-index property to take effect, the element must be positioned (i.e., it must have position set to relative, absolute, fixed, or sticky). z-index does not work with static positioning.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-Index with Positioning</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="relative z-10 bg-blue-500 text-white p-4">
    Positioned element with z-index 10
  </div>
  <div class="absolute z-20 bg-red-500 text-white p-4">
    Absolutely positioned element with z-index 20
  </div>
</body>
</html>

In this example:

  • The blue div is relative and has a z-index of 10.
  • The red div is absolute and has a z-index of 20.
  • The red div will be stacked above the blue div because it has a higher z-index, and it’s positioned absolutely.

Summary

  • z-0 to z-50: Predefined z-index values available in Tailwind CSS.
  • Custom Values: Define and use custom z-index values by extending the theme in tailwind.config.js.
  • Positioning Requirement: z-index only affects elements with position set to relative, absolute, fixed, or sticky.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about