Najvažnija stvar pri dizajniranju web stranica je pravilno pozicioniranje elemenata. To se može jednostavno učiniti korištenjem Tailwind klasa 'pozicije'. Pozicioniranje može biti različitih vrsta, jedno od njih je statično.
Ovaj će blog pokazati kako statički postaviti element.
Kako statički postaviti element u DOM – vjetar u leđa?
Element se može statički postaviti pomoću ' statički ” klasa položaja. Statička pozicija je zadana pozicija za HTML elemente. Elementi s ' položaj: statičan ” postavljeni su na temelju normalnog tijeka stranice, bez CSS stiliziranja.
Sintaksa
Sintaksa za primjenu ' statički ” klasa je:
Ovdje element može biti bilo koja oznaka na koju se može primijeniti atribut položaja.
Posjetite kod za praktičnu implementaciju statičkog pozicioniranja:
< tijelo razreda = 'tekstualni centar' >< centar >
< h1 razreda = 'text-green-600 text-5xl font-bold' >
Primjer statičkog položaja
< / h1 >
< b >Tailwind CSS klasa pozicije< / b >
< div razreda = 'statični tekst-lijevo p-2 m-2 bg-green-200 h-48' >
< str razreda = 'font-bold' >Statički pozicioniran< / str >
< div >Apsolutno pozicionirani element< / str >
< / div >
< / div >
< / centar >
< / tijelo >
U ovom kodu:
- “ tekst-centar ” prilagođava sadržaj oznaka središtu zaslona.
- Postavi ' ” označite u zeleno koristeći “ tekst-zelena-600 ', veličina teksta postavljena je na pet puta pomoću ' tekst-5×1 ', a font je naglašen pomoću ' font-bold ”.
- dva “ ' također se stvaraju i postavljaju statičnu lijevu poziciju za prvi ' div ' koristiti ' statični tekst-lijevo ”.
- Dodijelite klase ' p-2 ', ' m-2 ', ' bg-green-200 ', ' h-48 ” za drugi div i također postavite njegov položaj na apsolutno dolje lijevo pomoću “ relativno dolje-0 lijevo-0 ” razred.
Izlaz
Spremite gornji kod u datoteku i pregledajte web stranicu koju je on stvorio koja će se prikazati kao:
Statički pozicionirani element pomiče se normalnim tokom stranice dok drugi element zadržava svoju apsolutnu poziciju.
Zaključak
Za statički položaj elementa u DOM-u s normalnim tokom dokumenta, koristite ' statički ” klasa Leđnog vjetra “ položaj ' korisnost. Ovaj blog je pokazao kako pozicionirati bilo koji element ' statički ” uz jednostavnu praktičnu demonstraciju.