Najważniejszą rzeczą przy projektowaniu stron internetowych jest odpowiednie rozmieszczenie elementów. Można to łatwo zrobić, używając klas „pozycji” Tailwind. Pozycjonowanie może być różne, jedno z nich jest statyczne.

W tym blogu zademonstrujemy, jak statycznie ustawić element.

Jak statycznie ustawić element w DOM – Tailwind?

Element można ustawić statycznie za pomocą przycisku „ statyczny „klasa stanowiska”. Pozycja statyczna jest domyślną pozycją elementów HTML. Elementy z „ pozycja: statyczna ” są pozycjonowane w oparciu o normalny przepływ strony, bez żadnych stylów CSS.

Składnia
Składnia stosowania „ statyczny klasa to:

Tutaj elementem może być dowolny znacznik, do którego można zastosować atrybut pozycji.

Odwiedź kod praktycznej implementacji pozycjonowania statycznego:

W tym kodzie:

• „ centrum tekstowe ” dopasowuje zawartość tagów do środka ekranu.
• Ustaw '

  ” na zielony, używając przycisku „ tekst-zielony-600 ”, rozmiar tekstu jest ustawiony na pięciokrotność przez „ tekst-5×1 ”, a czcionka jest podkreślana za pomocą „ pogrubiona czcionka ”.

• Dwa „
  ” są również tworzone elementy i ustawiają statyczną pozycję po lewej stronie dla pierwszego „ div ' używając ' tekst statyczny po lewej stronie ”.
• Przypisz klasy „ p-2 „”, „ m-2 „”, „ bg-green-200 „”, „ h-48 ” dla drugiego div, a także ustaw jego położenie na absolutny lewy dolny róg za pomocą „ względne dolne-0 lewe-0 ' klasa.

Wyjście
Zapisz powyższy kod w pliku i wyświetl podgląd utworzonej przez niego strony internetowej, która wyświetli się jako:

Element umieszczony statycznie porusza się zgodnie z normalnym przepływem strony, podczas gdy drugi element zachowuje swoje położenie bezwzględne.

Wniosek

Aby ustawić element statycznie w DOM przy normalnym przepływie dokumentu, użyj opcji „ statyczny „klasa Tailwinda” pozycja ' pożytek. Na tym blogu pokazano, jak ustawić dowolny element „ statycznie ” z prostą demonstracją praktyczną.