Najdôležitejšou vecou pri navrhovaní webových stránok je správne umiestnenie prvkov. Dá sa to jednoducho urobiť pomocou tried „pozície“ Tailwind. Polohovanie môže byť rôznych typov, jeden z nich je statický.

Tento blog ukáže, ako staticky umiestniť prvok.

Ako staticky umiestniť prvok v DOM – Tailwind?

Prvok je možné staticky umiestniť pomocou „ statické “trieda pozície. Statická pozícia je predvolenou pozíciou pre prvky HTML. Prvky s „ poloha: statická ” sú umiestnené na základe bežného toku stránky bez akéhokoľvek štýlu CSS.

Syntax
Syntax na použitie „ statické “trieda je:

Prvok tu môže byť ľubovoľná značka, na ktorú možno použiť atribút pozície.

Navštívte kód pre praktickú implementáciu statického polohovania:

V tomto kóde:

• “ textové centrum ” upraví obsah značiek do stredu obrazovky.
• Nastaviť '

  ” značku na zelenú pomocou “ text-zelený-600 “, veľkosť textu je nastavená na päťnásobok pomocou „ text-5×1 “ a písmo sa zvýrazní pomocou „ font-bold “.

• Dva '
  “vytvoria sa aj prvky a nastavia statickú pozíciu na ľavej strane pre prvé “ div “ pomocou „ statický text-vľavo “.
• Priraďte triedy „ p-2 ',' m-2 ',' bg-green-200 ',' h-48 “ pre druhý div a tiež nastavte jeho polohu na absolútnu ľavú spodnú časť pomocou tlačidla „ relatívne dole-0 vľavo-0 ' trieda.

Výkon
Uložte vyššie uvedený kód do súboru a zobrazte ukážku ním vytvorenej webovej stránky, ktorá sa zobrazí ako:

Staticky umiestnený prvok sa pohybuje s normálnym tokom stránky, zatiaľ čo druhý prvok si zachováva svoju absolútnu polohu.

Záver

Ak chcete umiestniť prvok staticky do DOM s normálnym tokom dokumentu, použite „ statické 'trieda Tailwind' pozíciu ”úžitok. Tento blog ukázal, ako umiestniť ľubovoľný prvok “ staticky “ s jednoduchou praktickou ukážkou.