Nejdůležitější při navrhování webových stránek je správné umístění prvků. To lze snadno provést pomocí tříd „pozice“ Tailwind. Umístění může být různého typu, jeden z nich je statický.
Tento blog ukáže, jak staticky umístit prvek.
Jak staticky umístit prvek v DOM – Tailwind?
Prvek lze staticky umístit pomocí „ statický “třída pozice. Statická pozice je výchozí pozicí pro prvky HTML. Prvky s „ poloha: statická ” jsou umístěny na základě normálního toku stránky, bez jakýchkoli stylů CSS.
Syntax
Syntaxe pro použití „ statický “třída je:
Zde může být prvkem jakákoliv značka, na kterou lze použít atribut position.
Navštivte kód pro praktickou implementaci statického polohování:
< tělo třída = 'textové centrum' >< centrum >
< h1 třída = 'text-green-600 text-5xl font-bold' >
Příklad statické polohy
< / h1 >
< b >Třída pozice CSS Tailwind< / b >
< div třída = 'statický text-levý p-2 m-2 bg-zelený-200 h-48' >
< p třída = 'tučné písmo' >Staticky umístěn< / p >
< div >Absolutně umístěný prvek< / p >
< / div >
< / div >
< / centrum >
< / tělo >
V tomto kódu:
- “ textové centrum ” upraví obsah tagů na střed obrazovky.
- Nastav ' ” označte zelenou barvou pomocí “ text-zelený-600 “, velikost textu je nastavena na pětkrát pomocí „ text-5×1 “ a písmo je zvýrazněno pomocí „ font-bold “.
- dva' “ jsou také vytvořeny prvky a nastaví statickou levou pozici pro první “ div ' za použití ' statický text vlevo “.
- Přiřaďte třídy „ p-2 ',' m-2 ',' bg-green-200 ',' h-48 “ pro druhý div a také nastavte jeho pozici na absolutní levou dolní část pomocí „ relativní dole-0 vlevo-0 “třída.
Výstup
Uložte výše uvedený kód do souboru a zobrazte náhled jím vytvořené webové stránky, která se zobrazí jako:
Staticky umístěný prvek se pohybuje s normálním tokem stránky, zatímco druhý prvek si zachovává svou absolutní polohu.
Závěr
Chcete-li umístit prvek staticky do DOM s normálním tokem dokumentu, použijte „ statický 'třída Tailwind' pozice “utilita. Tento blog ukázal, jak umístit jakýkoli prvek „ staticky “ s jednoduchou praktickou ukázkou.