O mais importante ao projetar páginas da web é o posicionamento adequado dos elementos. Isso pode ser feito facilmente usando classes de “posição” do Tailwind. O posicionamento pode ser de diferentes tipos, um deles é estático.

Este blog demonstrará como posicionar estaticamente o elemento.

Como posicionar estaticamente um elemento no DOM – Tailwind?

Um elemento pode ser posicionado estaticamente usando o “ estático ”classe de posição. A posição estática é a posição padrão para elementos HTML. Os elementos com “ posição: estática ”São posicionados com base no fluxo normal da página, sem qualquer estilo CSS.

Sintaxe
A sintaxe para aplicar “ estático ”a classe é:

Aqui, o elemento pode ser qualquer tag à qual um atributo de posição possa ser aplicado.

Visite o código para implementação prática do posicionamento estático:

Neste código:

• “ centro de texto ”Ajusta o conteúdo das tags para o centro da tela.
• Colocou o '

  ”Para verde usando o“ texto-verde-600 ”, o tamanho do texto é definido para cinco vezes por “ texto-5×1 ”E a fonte é enfatizada usando o“ Negrito ”.

• Dois '
  ”Elementos também são criados e definem a posição estática do lado esquerdo para o primeiro“ divisão ”usando o“ texto estático à esquerda ”.
• Atribua as classes de “ p-2 ',' m-2 ',' bg-verde-200 ',' h-48 ”Para o segundo div e também defina sua posição para o canto inferior esquerdo absoluto usando o“ relativo inferior-0 esquerdo-0 ' aula.

Saída
Salve o código acima no arquivo e visualize a página criada por ele, que aparecerá como:

O elemento posicionado estaticamente se move com o fluxo normal da página enquanto o outro elemento mantém sua posição absoluta.

Conclusão

Para posicionar um elemento estaticamente no DOM com o fluxo normal do documento, use o “ estático ”classe do Tailwind“ posição ' Utilitário. Este blog mostrou como posicionar qualquer elemento “ estatisticamente ”com uma demonstração prática simples.