Índice Z do vento de cauda
Uma visão geral detalhada das propriedades e classes do índice Tailwind z é fornecida neste artigo.
O Z-index determina como os elementos são empilhados e exibidos em uma página da web. Esta propriedade CSS especifica a ordem de pilha de um elemento, que determina qual elemento aparece em cima do outro. Com o utilitário z-index do Tailwind, os desenvolvedores podem gerenciar facilmente a ordem de empilhamento dos elementos.
O que é índice z?
Z-index é uma propriedade CSS que determina a ordem de empilhamento dos elementos em uma página da web.
Ele atribui um valor numérico a um elemento que indica sua posição na pilha de elementos sobrepostos.
Os elementos com valores de índice z mais altos aparecem sobre os elementos com valores de índice z mais baixos.
A propriedade z-index funciona apenas em elementos com um valor de posição diferente de estático (ou seja, relativo, absoluto, fixo ou fixo).
Classes de índice Z do Tailwind
O Tailwind simplifica o processo de definição de valores de z-index fornecendo um conjunto de classes de utilitários que podem ser aplicadas a qualquer elemento.
As classes de índice z Tailwind são nomeadas de acordo com seus valores de índice z correspondentes, variando de 0 a 50.
| Aulas | Visão geral |
| z-0 | Esta classe é usada para definir o z-index de um elemento como zero. |
| z-10 | Usando esta classe, o z-index de um elemento é especificado como 10. |
| z-20 | O z-index de um elemento com esta classe é definido como 20. |
| z-30 | Nesse caso, o z-index de um elemento é definido como 30. |
| z-40 | O propósito desta classe é definir o z-index de um elemento como 40. |
| z-50 | Usado para definir o índice z de um elemento como 50. |
| z-auto | O valor z-index é definido como automático usando esta classe. O z-index não é definido explicitamente, mas é determinado por sua posição na hierarquia do documento em relação a outros elementos. |
Sintaxe
<element class="z-0">....</element>
Este exemplo demonstra o funcionamento de todas as classes z-index no Tailwind.
Pode-se ver claramente que elementos com valores mais altos de índice z se sobrepõem a elementos com valores mais baixos de índice z:
