Tailwind CSS Z-index

Tailwind CSS 是一个实用的 CSS 框架，它提供了在使用 CSS 时管理我们的 HTML 内容的类。顺风 CSS使我们的设计部分更容易并响应多个平台。 z-Index 实用程序用于控制元素的堆栈顺序。它是 CSS z-index属性的替代品。此类用于描述沿三维平面的 z-index，如下面的示例所示。

Tailwind CSS z-index 类：

• z-0
• z-10
• z-20
• z-30
• z-40
• z-50
• z-自动

注意：在上面的类中， z-0等价于z-index:0 CSS 属性等等。

z-0：用于为元素赋予 z-index 0。

句法：

....

例子：

输出：

z-10：用于为元素提供 z-index 10。元素沿 z 轴向上显示 10px。

句法：

....

例子：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Z-Index Class
    

        
0
        
1
        
2
        
3
        
4
        
5
    

  

输出：

z-20：用于为元素提供 z-index 20。元素沿 z 轴向上显示 20px。

句法：

....

例子：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Z-Index Class
    

        
0
        
1
        
2
        
3
        
4
        
5
    

  

输出：

z-30：用于为元素赋予 z-index 30。元素沿 z 轴向上显示 30px。

句法：

....

例子：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Z-Index Class
    

        
0
        
1
        
2
        
3
        
4
        
5
    

  

输出：

z-40：用于为元素提供 z-index 40。元素沿 z 轴向上显示 40px。

句法：

....

例子：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Z-Index Class
    

        
0
        
1
        
2
        
3
        
4
        
5
    

  

输出：

z-50：它 用于为元素提供 z-index 50。元素沿 z 轴向上显示 50px。

句法：

....

例子：

HTML

    

  

    

        GeeksforGeeks
    
    Tailwind CSS Z-Index Class
    

        
0
        
1
        
2
        
3
        
4
        
5
    

  

输出：