CSS pozicioniranje odavno je važan dio izrade web stranica izgleda. Čak i uz uspon CSS tehnika rasporeda kao što su Flexbox i CSS Grid, pozicioniranje i dalje ima važno mjesto u bilo kojem web trikovima.
Kada upotrebljavate CSS pozicioniranje, prvo što trebate učiniti jest ustanoviti CSS svojstvo za poziciju da bi se pregledao pregledniku da li ćete koristiti apsolutno ili relativno pozicioniranje za određeni element. Također morate 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
Statičko pozicioniranje
Static je zadana pozicija za bilo koji element na web stranici. Ako ne odredite položaj nekog elementa, on je statičan, što znači da se na zaslonu prikazuje na temelju mjesta gdje se nalazi u HTML dokumentu i kako se prikazuje unutar normalnog protoka tog dokumenta.
Ako primijenite pravila za pozicioniranje kao što je vrh ili lijevo na element koji ima statički položaj, ta se pravila zanemaruju, a element ostaje tamo gdje se pojavljuje u normalnom toku dokumenta. Rijetko, ako ikad, trebate postaviti element statičnom položaju 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 osnovu najbližeg ne-statičkog položaja predaka tog elementa. Budući da se apsolutno smješteni element izvlači iz normalnog protoka dokumenta, on utječe na to kako elementi prije nje ili nakon nje u HTML-u nalaze na web stranici. Kao primjer, ako imate podjelu koja se nalazi pomoću vrijednosti relativnog i unutar te podjele, imate paragraf koji želite postaviti 50 piksela s vrha podjele, dodate vrijednost pozicije apsolutan na taj stav, uz offset vrijednost od 50 piksela na vrh imovine, ovako: pozicija: apsolutna;vrh: 50px;
Ovaj apsolutno postavljeni element uvijek prikazuje 50 piksela s vrha te relativno postavljene podjele, bez obzira na to što se u normalnom tijeku prikazuje. Vaš apsolutno postavljeni element koristi svoj relativno pozicionirani kontekst, a vrijednost pozicioniranja koju koristite je relativna u odnosu na to. Četiri značajke pozicioniranja koju imate na raspolaganju su: Možete koristiti bilo vrh ili dno - jer se element ne može postaviti prema obje ove vrijednosti - i bilo pravo ili lijevo. Ako je element postavljen na apsolutni položaj, ali nema nepravilno postavljenih predaka, onda je postavljen relativno prema elementu tijela, koji je element najvišeg nivoa stranice. 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 svojoj web stranici, a treći ima a pozicija: relativna stila postavljena na nju, njegov položaj je prebačen na temelju trenutnog položaja. Stavak 1. Stavak 2. Stavak 3. U gore navedenom primjeru, treći je odlomak smješten s lijeve strane elementa spremnika, ali još uvijek ispod prva dva odlomka. Ostaje u normalnom tijeku dokumenta i malo je pomaknut. Ako ga promijenite pozicija: apsolutna, na njemu se prikazuje bilo što što slijedi jer više nije u normalnom tijeku dokumenta. Elementi na web stranici često se koriste za postavljanje vrijednosti pozicija: relativna bez uspostavljanja offset vrijednosti, što znači da element ostaje točno ondje gdje će se pojaviti u normalnom protoku. 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 vrijednošću klase kontejner, što je zajednički scenarij u web dizajnu, ta se podjela može postaviti na položaj rođak tako da bilo što unutar nje može ga koristiti kao kontekst pozicioniranja. 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 tom mjestu - gotovo kao vodeni žig. Sve ostalo na stranici potom prelazi taj element. Da biste koristili ovu vrijednost entiteta, postavite: pozicija: fiksna;
Imajte na umu da prilikom popravljanja elementa na mjestu na vašoj web-lokaciji ispisuje se na toj lokaciji kada se web-stranica ispisuje. Na primjer, ako je vaš element fiksiran pri vrhu stranice, on će se prikazati 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 # prvi {pozicija: fiksno; } } @media print { h1 # prvi {položaj: statičan; } }
Relativno pozicioniranje
Što je s fiksnim pozicioniranjem?
