Tailwind CSS Índice Z

Tailwind CSS es un marco CSS de utilidad que proporciona clases para administrar nuestro contenido HTML en el uso de CSS. El Tailwind CSS hace que nuestra parte de diseño sea más fácil y receptiva para múltiples plataformas. La utilidad z-Index es para controlar el orden de apilamiento de un elemento. Es la alternativa a la propiedad CSS z-index . Esta clase se utiliza para describir el índice z a lo largo del plano tridimensional, como se indica en los ejemplos siguientes.

Tailwind CSS clases de índice z:

  • z-0
  • z-10
  • z-20
  • z-30
  • z-40
  • z-50
  • z-auto

Nota: En la clase anterior, z-0 es equivalente a la propiedad CSS z-index:0 y así sucesivamente.

z-0: Se utiliza para dar el índice z 0 al elemento. 

Sintaxis:

<element class="z-0">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full 
                    h-12 bg-green-400" 
              style="top: 32px;">0</div>
        <div class="relative z-10 w-full 
                    h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full 
                    h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full 
                    h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full 
                    h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full 
                    h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>

Producción: 

 z-10: Se utiliza para dar el índice z 10 al elemento. Los elementos aparecen 10 px al revés a lo largo del eje z.

Sintaxis:

<element class="z-10">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full 
                    h-12 bg-yellow-400" style="top: 32px;">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>

Producción: 

z-20: Se utiliza para dar el índice z 20 al elemento. Los elementos aparecen 20px al revés a lo largo del eje z.

Sintaxis:

<element class="z-20">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400"
                                           style="top: 32px;">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>

Producción:

z-30: Se utiliza para dar el índice z 30 al elemento. Los elementos aparecen 30px al revés a lo largo del eje z.

Sintaxis:

<element class="z-30">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 
                           bg-blue-400" style="top: 32px;">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>

Producción:

 z-40: Se utiliza para dar el índice z 40 al elemento. Los elementos aparecen 40px al revés a lo largo del eje z.

Sintaxis:

<element class="z-40">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300" 
                                         style="top: 32px;">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>

Producción:

 z-50: Se utiliza para dar el índice z 50 al elemento. Los elementos aparecen 50 px al revés a lo largo del eje z.

Sintaxis:

<element class="z-50">....</element>

Ejemplo:

HTML

<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400" 
                                          style="top: 32px;">5</div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por mrsuryapratap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *