CSS pozicioniranje je više od samo X, Y koordinata
CSS pozicioniranje odavno je važan dio izrade web stranica izgleda. Čak i uz uspon novijih CSS tehnika rasporeda kao što su Flexbox i CSS Grid, pozicioniranje i dalje ima važno mjesto u bilo kojem trikovima web dizajera.
Kada koristite CSS pozicioniranje, prva stvar koju trebate učiniti je utvrditi CSS svojstvo za poziciju da bi se pregledao pregledniku ako ćete koristiti apsolutno ili relativno pozicioniranje za određeni element. Također morate jasno razumjeti razliku između ova dva svojstva pozicioniranja.
Dok apsolutni i relativni su dva svojstva položaja CSS-a najčešće korištena u web dizajnu, zapravo postoje četiri države u svojstvu položaja:
- statički
- apsolutan
- rođak
- fiksni
Static je zadana pozicija za bilo koji element na web stranici. Ako ne odredite položaj nekog elementa, to će biti statično. To znači da će se na zaslonu prikazati na temelju mjesta gdje se nalazi u HTML dokumentu i kako će se prikazati unutar normalnog toka tog dokumenta.
Ako primijenite pravila za pozicioniranje poput vrha ili lijevo na element koji ima statički položaj, pravila će se zanemariti i element će ostati tamo gdje se pojavljuje u normalnom toku dokumenta. U stvari, rijetko, ako ikad, trebate postaviti element na statički položaj u CSS jer je to zadana vrijednost.
Apsolutno CSS pozicioniranje
Apsolutno pozicioniranje je vjerojatno najlakši položaj CSS-a za razumijevanje. Počinjete s ovim svojstvom CSS položaja:
pozicija: apsolutna;Ova vrijednost govori pregledniku da se sve što treba postaviti treba ukloniti iz uobičajenog protoka dokumenta i umjesto toga staviti na točnu lokaciju na stranici. To se izračunava na temelju najbližeg ne-statički postavljenog predaka tog elementa.
Budući da se apsolutno postavljen element izvlači iz normalnog protoka dokumenta, neće utjecati na to kako se elementi na njemu ili nakon njega u HTML-u nalaze na web stranici.
Kao primjer - ako ste imali odjel koji je postavljen pomoću vrijednosti rođaka (uskoro ćemo pogledati tu vrijednost), a unutar te podjele imali ste odlomak koji ste željeli postaviti 50 piksela s vrha podjele, vi dodati vrijednost pozicije "apsolutno" na taj stav, uz offset vrijednost od 50px na "vrhu" imovine, kao što je ovaj.
pozicija: apsolutna; vrh: 50px;Ovaj apsolutno postavljeni element tada bi uvijek prikazivao 50 piksela s vrha te relativno postavljene podjele - bez obzira na to što se u normalnom tijeku prikazuje. Vaš "apsolutno" pozicionirani element koristio je relativno pozicioniran kao svoj kontekst, a vrijednost poziranja koju koristite je relativna.
Četiri značajke pozicioniranja koju imate na raspolaganju su:
- vrh
- pravo
- dno
- lijevo
Možete koristiti bilo gornji ili donji dio (jer se element ne može postaviti u skladu s obje ove vrijednosti) i desno ili lijevo.
Ako je element postavljen na apsolutni položaj, ali ondje nema nepravilno postavljenih predaka, tada će se postaviti u odnosu na element tijela, što je element najvišeg nivoa stranice.
Relativno pozicioniranje
Već smo spomenuli relativno pozicioniranje, pa pogledajmo tu imovinu sada.
Relativno pozicioniranje koristi iste četiri svojstva pozicioniranja kao apsolutno pozicioniranje, ali umjesto da temelji položaj elementa na najbližem ne-statički postavljenom predjelu, počinje od mjesta gdje će element biti ako je još uvijek u normalnom toku.
Na primjer, ako imate tri odlomka na web stranici, a treći ima položaj "relativno", stavite na nju, položaj će biti premješten na temelju trenutne lokacije.
Stavak 1.
Stavak 2.
Stavak 3.
U gore navedenom primjeru, treći odlomak će biti postavljen 2em s lijeve strane elementa spremnika, ali će i dalje biti ispod prva dva odlomka. Ostaje u normalnom tijeku dokumenta, i samo se malo nadoknađuje. Ako ste ga promijenili u položaj: apsolutni; bilo što što slijedi bilo bi prikazano na vrhu, jer više neće biti u normalnom tijeku dokumenta.
Elementi na web stranici često se koriste za postavljanje vrijednosti položaja: relativno bez utvrđene vrijednosti pomaka, što znači da element ostaje točno ondje gdje će se pojaviti u normalnom tijeku. To se radi samo kako bi se taj element ustanovio kao kontekst protiv kojeg se drugi elementi mogu apsolutno smjestiti. Na primjer, ako imate podjelu koja okružuje cijelu web-lokaciju s klasičnom vrijednošću "kontejnera" (što je vrlo čest scenarij u web-dizajnu), ta se podjela može postaviti na položaj rođaka tako da sve što se unutar nje može koristiti kao kontekst pozicioniranja.
Što je s fiksnim pozicioniranjem?
Fiksno pozicioniranje puno je poput apsolutnog pozicioniranja. Položaj elementa izračunava se na isti način kao i apsolutni model, ali fiksni elementi se zatim fiksiraju na toj lokaciji - gotovo kao vodeni žig . Sve ostalo na stranici će se potom pomaknuti pokraj tog elementa.
Da biste koristili ovu vrijednost entiteta, postavili biste:
pozicija: fiksna;Imajte na umu da prilikom popravljanja elementa na mjestu na vašoj web-lokaciji ispisat će se na toj lokaciji kada se ispisuje vaša web-stranica. Na primjer, ako je vaš element fiksiran na vrhu stranice, prikazat će se na vrhu svake ispisane stranice - jer je pričvršćen na vrh stranice. Možete upotrijebiti vrste medija da biste promijenili kako ispisane stranice prikazuju fiksne elemente:
@media zaslon {h1 # first {pozicija: fiksna; }} @media print {h1 # first {pozicija: statična; }}Izvorni članak Jennifer Krynin. Uredio Jeremy Girard dana 1.7.16.