Ang pinakamahalagang bagay habang nagdidisenyo ng mga web page ay ang tamang pagpoposisyon ng mga elemento. Madali itong magawa sa pamamagitan ng paggamit ng mga klase ng 'posisyon' ng Tailwind. Ang pagpoposisyon ay maaaring may iba't ibang uri ang isa sa mga ito ay static.
Ipapakita ng blog na ito kung paano iposisyon nang statically ang elemento.
Paano Statically Position ang isang Element sa DOM - Tailwind?
Ang isang elemento ay maaaring static na nakaposisyon gamit ang ' static ” klase ng posisyon. Ang static na posisyon ay ang default na posisyon para sa mga elemento ng HTML. Ang mga elemento na may ' posisyon: static ” ay nakaposisyon batay sa normal na daloy ng page, nang walang anumang CSS styling.
Syntax
Ang syntax para sa paglalapat ng ' static 'ang klase ay:
Dito, ang elemento ay maaaring maging anumang tag kung saan maaaring ilapat ang isang katangian ng posisyon.
Bisitahin ang code para sa praktikal na pagpapatupad ng static na pagpoposisyon:
< katawan klase = 'text-center' >< gitna >
< h1 klase = 'text-green-600 text-5xl font-bold' >
Halimbawa ng Static na Posisyon
< / h1 >
< b >Tailwind CSS Position Class< / b >
< div klase = 'static na text-kaliwa p-2 m-2 bg-berde-200 h-48' >
< p klase = 'font-bold' >Istatistikong Nakaposisyon< / p >
< div >Ganap na Nakaposisyon na elemento< / p >
< / div >
< / div >
< / gitna >
< / katawan >
Sa code na ito:
- “ text-center ' inaayos ang nilalaman ng tag sa gitna ng screen.
- Itakda ang ' 'tag sa berde gamit ang ' text-green-600 ”, ang laki ng text ay nakatakda sa limang beses ng “ text-5×1 ” at binibigyang-diin ang font gamit ang “ font-bold ”.
- Dalawa ' Ginagawa rin ang mga elemento at itinakda ang static na posisyon sa kaliwang bahagi para sa unang ' div ' gamit ang ' static na text-kaliwa ”.
- Italaga ang mga klase ng ' p-2 ',' m-2 ',' bg-berde-200 ',' h-48 ” para sa pangalawang div at itakda din ang posisyon nito sa ganap na kaliwang ibaba gamit ang “ kamag-anak sa ibaba-0 kaliwa-0 ” klase.
Output
I-save ang code sa itaas sa file at i-preview ang webpage na ginawa nito na lalabas bilang:
Ang static na nakaposisyon na elemento ay gumagalaw sa normal na daloy ng pahina habang ang isa pang elemento ay nagpapanatili ng ganap na posisyon nito.
Konklusyon
Upang iposisyon ang isang elemento nang static sa DOM na may normal na daloy ng dokumento, gamitin ang “ static 'klase ng Tailwind' posisyon ' kagamitan. Ipinakita ng blog na ito kung paano iposisyon ang anumang elemento ' statically ” na may simpleng praktikal na pagpapakita.