Pats galvenais, veidojot tīmekļa lapas, ir pareiza elementu pozicionēšana. To var viegli izdarīt, izmantojot Tailwind “pozīcijas” klases. Pozicionēšana var būt dažāda veida, viens no tiem ir statisks.
Šis emuārs parādīs, kā statiski novietot elementu.
Kā statiski novietot elementu DOM — Tailwind?
Elementu var statiski novietot, izmantojot ' statisks ” pozīcijas klase. Statiskā pozīcija ir HTML elementu noklusējuma pozīcija. Elementi ar ' pozīcija: statiska ” ir izvietoti, pamatojoties uz parasto lapas plūsmu, bez jebkāda CSS stila.
Sintakse
Sintakse, lai lietotu ' statisks klase ir:
Šeit elements var būt jebkurš tags, kuram var lietot pozīcijas atribūtu.
Apmeklējiet kodu statiskās pozicionēšanas praktiskai ieviešanai:
< ķermeni klasē = 'teksta centrs' >< centrs >
< h1 klasē = 'text-green-600 text-5xl font-bold' >
Statiskās pozīcijas piemērs
< / h1 >
< b >Tailwind CSS pozīcijas klase< / b >
< div klasē = 'statisks teksts-pa kreisi p-2 m-2 bg-green-200 h-48' >
< lpp klasē = 'font-bold' >Statiski pozicionēts< / lpp >
< div >Absolūtais pozicionētais elements< / lpp >
< / div >
< / div >
< / centrs >
< / ķermeni >
Šajā kodā:
- ' teksta centrs ” pielāgo tagu saturu ekrāna centram.
- Iestatiet ' ' tagu uz zaļu, izmantojot ' teksts-zaļš-600 ”, teksta lielums ir iestatīts uz piecas reizes ar “ teksts-5×1 ' un fonts tiek uzsvērts, izmantojot ' font-bold ”.
- Divi' Tiek izveidoti arī elementi un iestatīta statiskā kreisās puses pozīcija pirmajam div ' izmantojot ' statisks teksts pa kreisi ”.
- Piešķiriet klases ' p-2 ',' m-2 ',' bg-green-200 ',' h-48 ” otrajam div, un arī iestatiet tā pozīciju uz absolūto apakšējo kreiso pusi, izmantojot relatīvais apakšējais-0 kreisi-0 ” klase.
Izvade
Saglabājiet iepriekš minēto kodu failā un priekšskatiet tā izveidoto tīmekļa lapu, kas tiks parādīta kā:
Statiski novietotais elements pārvietojas ar parasto lapas plūsmu, bet otrs elements saglabā savu absolūto pozīciju.
Secinājums
Lai statiski novietotu elementu DOM ar normālu dokumenta plūsmu, izmantojiet ' statisks 'Astuves vēja klase' pozīciju ” lietderība. Šis emuārs ir parādījis, kā novietot jebkuru elementu ' statiski ” ar vienkāršu praktisku demonstrāciju.