CSS pozicioniranje je više od samo X, Y koordinata
Postavljanje CSS-a je odavno važan deo kreiranja sajtova. Čak i uz porast novih CSS tehnika rasporeda kao što su Flexbox i CSS Grid, pozicioniranje i dalje ima važno mesto u svakoj web dizajnerovoj vreći trikova.
Kada koristite pozicioniranje CSS-a, prva stvar koju ćete morati da uradite je da uspostavite CSS svojstvo za poziciju da biste ispričali pregledaču ako želite da koristite apsolutno ili relativno pozicioniranje za određeni element. Takođe morate jasno razumjeti razliku između ova dva svojstva pozicioniranja.
Dok su apsolutne i relativne dve osobine CSS osobine koje se najčešće koriste u web dizajnu, u stvari su četiri stanja u svojstvu pozicije:
- statički
- apsolutno
- relativan
- fiksna
Statička je podrazumevana pozicija za bilo koji element na web stranici. Ako ne definišete položaj elementa, biće statična. To znači da će se na ekranu prikazati na osnovu toga gdje se nalazi u HTML dokumentu i kako će se prikazati unutar normalnog toka tog dokumenta.
Ako primenite pravila pozicioniranja kao vrh ili levo na element koji ima statički položaj, ta pravila će biti ignorisana i element će ostati tamo gde se pojavljuje u normalnom protoku dokumenta. Istina, retko ćete, ako ikad, trebati postaviti element u statičku poziciju u CSS-u, jer je to podrazumevana vrijednost.
Apsolutno CSS pozicioniranje
Apsolutno pozicioniranje je verovatno najjednostavnija CSS pozicija za razumevanje. Počinjete sa ovom CSS osobinom:
pozicija: apsolutno;Ova vrijednost govori pretraživaču da se ono što treba pozicionirati treba ukloniti iz normalnog toka dokumenta i umjesto toga staviti na tačnu lokaciju na stranici. Ovo se izračunava na osnovu najbližeg ne-statički pozicionog predaka tog elementa.
Pošto se apsolutno pozicionirani element izvlači iz normalnog toka dokumenta, neće uticati na to kako se elementi koji su pre njega ili nakon toga u HTML-u postavljeni na web stranici.
Kao primer - ako ste imali podjelu koja je bila pozicionirana koristeći relativnu vrijednost (uskoro ćemo pogledati ovu vrijednost), au okviru te podjele ste imali paragraf koji želite položiti 50 piksela sa vrha podjele dodala bi poziciju vrijednosti "apsolutne" tom stavu, zajedno sa vrijednošću ofset-a od 50px na "vrhu" svojstva, ovako.
pozicija: apsolutno; vrh: 50px;Ovaj apsolutno pozicionirani element bi onda uvek prikazivao 50 piksela sa vrha relativno pozicionirane podjele - bez obzira na to šta se tamo prikazuje u normalnom toku. Vaš "apsolutno" pozicionirani element je koristio relativno pozicioniranu kao svoj kontekst i vrijednost pozicije koju koristite relativna je to.
Četiri svojstva pozicioniranja koja imate na raspolaganju su:
- vrh
- desno
- dno
- levo
Možete koristiti gornji ili donji deo (pošto element ne može biti pozicioniran prema obe ove vrijednosti) i bilo lijevo ili lijevo.
Ako je element postavljen na poziciju apsolutne, ali tamo nema statički pozicioniranih predaka, onda će biti pozicioniran u odnosu na tijelo element, koji je element najvišeg nivoa stranice.
Relativno pozicioniranje
Već smo pomenuli relativno pozicioniranje, pa pogledajmo sada tu imovinu.
Relativno pozicioniranje koristi iste četiri osobine pozicioniranja kao apsolutno pozicioniranje, ali umjesto da osnuje poziciju elementa na najbližem ne-statički pozicionom predaku, počinje od toga gdje bi element bio ako bi i dalje bio u normalnom toku.
Na primjer, ako na vašoj web stranici imate tri paragrafa, a na trećoj poziciji stavljen je položaj "relativan", pozicija će biti offset na osnovu trenutne lokacije.
Stav 1.
Stav 2.
Paragraf 3
U prethodnom primeru treći pasus će biti postavljen 2em sa leve strane elementa kontejnera, ali će i dalje biti ispod prvih dva paragrafa. Ostaće u normalnom toku dokumenta, i samo će biti malo nadoknaditi. Ako ste je promijenili na poziciju: apsolutno; sve što sledi biće prikazano na vrhu, jer više ne bi bilo u normalnom toku dokumenta.
Elementi na web stranici se često koriste za postavljanje vrijednosti pozicije: relativan, bez uspostavljene vrijednosti offset-a, što znači da element ostaje tačno gdje bi se pojavio u normalnom toku. Ovo se radi isključivo radi uspostavljanja tog elementa kao konteksta protiv kojeg se drugi elementi mogu apsolutno pozicionirati. Na primjer, ako imate podjelu koja okružuje vašu celokupnu web lokaciju sa klasičnom vrijednošću "kontejnera" (što je vrlo uobičajen scenario u web dizajnu), ta podela se može postaviti na poziciju relativnog tako da bilo šta unutar nje može koristiti kao kontekst pozicioniranja.
Šta je sa fiksnim pozicioniranjem?
Fiksno pozicioniranje je slično apsolutnom pozicioniranju. Položaj elementa izračunava se na isti način kao apsolutni model, ali fiksni elementi se onda fiksiraju na toj lokaciji - skoro kao vodeni žig . Sve ostalo na stranici će se pomerati pored tog elementa.
Da biste koristili ovu vrijednost svojstva, postavili biste:
pozicija: fiksna;Imajte na umu, kada popravite element na mjestu na vašem sajtu, on će štampati na toj lokaciji kada se odštampa vaša Web stranica. Na primjer, ako je vaš element fiksiran na vrhu vaše stranice, on će se pojaviti na vrhu svake odštampane stranice - jer je fiksiran na vrh stranice. Možete koristiti tipove medija kako biste promenili način na koji štampane stranice prikazuju fiksne elemente:
@media ekran {h1 # prvi {pozicija: fiksna; }} @media print {h1 # prvi {položaj: statički; }}Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 1/7/16.