Este artigo demonstrará os utilitários que podem ser usados para controlar o posicionamento de elementos posicionados na página web.
Utilitários Tailwind usados para controlar o posicionamento de elementos posicionados?
O utilitário Tailwind CSS que trata especificamente do posicionamento de elementos posicionados no eixo horizontal ou vertical é “ Início | Certo | Parte inferior | Esquerda ”. Assim como outros utilitários, ele também fornece várias classes que podem definir o elemento posicionado em vários locais, algumas dessas classes são descritas abaixo:
- inserção-{placementValue}
- início-{placementValue}
- topo-{placementValue}
- fim-{placementValue}
- inferior-{placementValue}
- esquerda-{placementValue}
- direita-{placementValue}
Agora, vamos dar um exemplo prático de utilização de algumas dessas classes para melhor entendimento.
Exemplo: posicionamento de elemento posicionado usando utilitários CSS Tailwind
Neste exemplo, o utilitário descrito acima será usado para colocar o elemento posicionado em diferentes locais de uma página web, conforme mostrado abaixo:
< corpo aula = 'grade grade-cols-3' >
< divisão aula = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 texto-centro justificar-esticar arredondado' >
< divisão aula = 'esquerda absoluta-0 top-0 h-16 w-16 bg-blue-400 arredondado p-4' > Item 1 < / divisão >
< / divisão >
< divisão aula = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 texto-centro justificar-esticar arredondado' >
< divisão aula = 'inserção absoluta-x-0 top-0 h-16 bg-blue-400 arredondado p-4' > Item 2 < / divisão >
< / divisão >
< divisão aula = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 texto-centro justificar-esticar arredondado' >
< divisão aula = 'inserção absoluta-0 bg-blue-400 arredondado p-4' > Artigo 3 < / divisão >
< / divisão >
< divisão aula = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 texto-centro justificar-esticar arredondado' >
< divisão aula = 'inserção absoluta-y-0 direita-0 w-16 bg-blue-400 arredondado p-4' > Item 4 < / divisão >
< / divisão >
< divisão aula = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 texto-centro justificar-esticar arredondado' >
< divisão aula = 'fundo absoluto-0 direita-0 h-16 w-16 bg-blue-400 arredondado p-4' > Artigo 5 < / divisão >
< / divisão >
< / corpo >
Descrição do código acima:
- Primeiro, crie cinco pais “ divisão ”Elementos e aplique várias classes CSS do Tailwind para definir a posição relativa, altura, largura, plano de fundo, preenchimento, margem e assim por diante.
- Em seguida, crie um “aninhado” divisão ”Elemento dentro de cada pai“div”. O posicionamento será feito para este elemento “div” aninhado.
- Em seguida, aplique classes CSS tailwind de “ absoluto ”, “ h ”, “ Em ”, “ bg ”, ” p ', e ' arredondado ”Para estilizar o aninhado“ divisão ' elemento.
- Depois disso, começando do div aninhado um a cinco, atribua novas classes de “ esquerda-0 topo-0 ”, “ inserção-x-0 ”, “ inserção-0 ”, “ inserção-y-0 direita-0 ', e ' inferior-0 direita-0 ”Respectivamente.
- Essas classes definem a posição dos elementos div aninhados no canto superior esquerdo, cobrem a posição superior, cobrem todo o espaço pai, cobrem o lado direito e cobrem a posição inferior esquerda, respectivamente.
Após a execução, a visualização dos elementos div fica assim:
A saída mostra que os elementos posicionados são colocados nas posições desejadas.
Conclusão
O ' Início | Certo | Parte inferior | Esquerda ”O utilitário Tailwind é usado para controlar o posicionamento de elementos na página da web. Ele usa várias classes para direcionar cada posição e então move o elemento selecionado naquele local de acordo com os requisitos. Essas classes colocam principalmente os elementos posicionados à esquerda, direita, inferior e superior. Eles podem ajudar a cobrir toda a área, cobrir direções específicas como esquerda ou superior e assim por diante. Este artigo explicou com sucesso os utilitários que podem ser usados para controlar o posicionamento de elementos posicionados.