Cel mai important lucru la proiectarea paginilor web este poziționarea corectă a elementelor. Acest lucru se poate face cu ușurință folosind clasele de „poziție” Tailwind. Poziționarea poate fi de diferite tipuri, una dintre ele este statică.

Acest blog va demonstra cum să poziționați static elementul.

Cum se poziționează static un element în DOM – Tailwind?

Un element poate fi poziționat static folosind „ static ” clasa de post. Poziția statică este poziția implicită pentru elementele HTML. Elementele cu „ poziție: static ” sunt poziționate pe baza fluxului normal al paginii, fără nici un stil CSS.

Sintaxă
Sintaxa pentru aplicarea „ static ” clasa este:

Aici, elementul poate fi orice etichetă căreia i se poate aplica un atribut de poziție.

Vizitați codul pentru implementarea practică a poziționării statice:

În acest cod:

• „ centru de text ” ajustează conținutul etichetelor în centrul ecranului.
• Seteaza '

  „ eticheta la verde folosind „ text-verde-600 ”, dimensiunea textului este setată la cinci ori prin „ text-5×1 ” iar fontul este accentuat folosind „ font-bold ”.

• Două '
  ” sunt de asemenea create elemente și setează poziția statică din stânga pentru primul ” div ' folosind ' text static-stânga ”.
• Atribuiți clasele de „ p-2 ', ' m-2 ', ' bg-verde-200 ', ' h-48 ” pentru a doua div și, de asemenea, setați-i poziția la stânga jos absolut folosind butonul „ relativ jos-0 stânga-0 ” clasa.

Ieșire
Salvați codul de mai sus în fișier și previzualizați pagina web creată de acesta, care va apărea ca:

Elementul poziționat static se mișcă cu fluxul normal al paginii, în timp ce celălalt element își păstrează poziția absolută.

Concluzie

Pentru a poziționa un element static în DOM cu fluxul normal al documentului, utilizați „ static „clasa vântului din coadă” poziţie ” utilitate. Acest blog a arătat cum să poziționați orice element „ static ” cu o simplă demonstrație practică.