CSS pozicija: primjeri

Umjetnici make-up novaca često imaju poteškoće u postavljanju elemenata putem CSS-a

Specifičnost izgradnje protoka dokumenta

Položaj CSS radi s protokom web stranice. Kako razumjeti ovo? Prema zadanim postavkama svi elementi stranice uređeni su redoslijedom kojim ste ih stvorili u izborniku htmloznačavanje. Ako je oznaka zaglavlje koji se nalazi iznad oznake podnožje, zatim na stranici bit će prikazana iznad. I obrnuto, ako iz nekog razloga odlučite staviti podnožje u hTML iznad "heder", "podrum" stranice će biti prikazan iznad "zaglavlja". U tom slučaju blok elementi zauzimaju svu dostupnu širinu. S druge strane, oni malih slova smješteni su u jednu liniju sve dok ih ne zauzmu, a zatim se prenose na novu. Ova se narudžba naziva "protok dokumenta".

Da biste promijenili ponašanje protoka, upotrijebite svojstvo Položaju CSS-u. Također, može se razlikovati zbog imovine plutaju, ali to nećemo razmotriti. Pomoću pozicioniranja možete prisiliti element da ispadne iz normalne niti, nakon čega će se početi ponašati na nov način. Koliko točno - ovisi o korištenoj vrijednosti imovine.

CSS pozicija: statična

Pozicija: statična, ili statično pozicioniranje, je zadana vrijednost za sve blokove html, koje ste stvorili. U normalnim okolnostima, to se ne mora nositi. Ako nijedan položaj nije specificiran za bilo koji blok ili redak, onda ima vrijednost statična. Na stranici se takva komponenta prikazuje u skladu s protokom. Ako navedete svojstva za to desno / lijevo ili vrh / dno, neće biti nikakvog učinka.

CSS pozicija: fiksna

Kada upotrebljavate ovaj entitet, element je izvan normalnog tijeka dokumenta. Sada se izračunava njegov položaj u odnosu na prozor preglednika, bez obzira na to kako su postavljene druge komponente. Drugim riječima, blok s položajem: fiksno idite na vrh stranice, pritisnite na rub prozora preglednika i ostali elementi zauzeti svoje mjesto u skladu s protokom.

Glavna značajka fiksno postavljenih elemenata je da mogu preklapati druge blokove i stranice. Prilikom pomicanja bloka s položajem: fiksno Čini se da ostaje na mjestu, a da ne nestane s ekrana. To je korisno ako trebate napraviti navigaciju ili sličan element koji korisnik uvijek mora imati pristup. Fiksno pozicioniranje također vrijedi ako želite postaviti gumb za brzo pomicanje na određenom dijelu stranice.

CSS pozicija: relativna

Upotreba tog entiteta zove se relativno pozicioniranje. Ako postavite stavku Stavka na Položaj: relativno, on će ostati na svom mjestu. Na prvi pogled, ništa posebno neće se dogoditi, ali sve će se promijeniti ako dodatno upotrijebite svojstva desno / lijevo i vrh / dno. Pomoću njihove pomoći možete kontrolirati kretanje komponente u odnosu na njegovu lokaciju. Na mjestu gdje je blok ili linija bila prije, bit će prazan prostor - ostali elementi ostat će na svojim pozicijama, ne obraćajući pažnju na slobodno mjesto.

Pri pomicanju komponente ne utječe na položaj okolnih dijelova stranice. Oni će ostati na svojim mjestima, iako ih relativno smješteni blokovi mogu blokirati. Samu se nekretninu rijetko koristi. Obično se koristi u kombinaciji sa sljedećom opcijom.

Apsolutno pozicioniranje

Jedna od najzanimljivijih i najčešće korištenih opcija. Kada upotrebljavate svojstvo Položajs vrijednošću apsolutan Položaj komponente stranice izračunat će se u odnosu na prozor preglednika. drugo elementi (koji nisu apsolutno pozicionirani) čini se "zaboravljaju" o postojanju "kolege" s pozicijom: apsolutni i zauzeti svoje mjesto u potoku. Čini se da je sve točno kao u slučaju pozicije: fiksni, Ali postoje i ozbiljne razlike.

Prvo, položaj elementa može se slobodno kontrolirati - koristi svojstva gore / desno / dno / lijevo. Na primjer, ako navedete vrijednost dno: 100piks, blok "gura" od dna stranice do 100 piksela. Drugo, kada se pomakne, "apsolutna" komponenta će ostati na svom mjestu, umjesto da se kreće sa stranicom.

Interakcija apsolutnih blokova s ​​roditeljskim elementima

Možete postići još precizniju kontrolu nad apsolutno smještenom komponentom. Da biste to učinili, morate postaviti svoj roditelj u položaj: fiksna, relativna ili apsolutna.

Razmotrimo primjer. Imate li div s razredom Relativna-div, unutar kojeg se nalazi div s razredom apsolutna-div. Postavite svojstvo položaja na unutarnji blok: apsolutni. Ona odmah "leti" iz struje i nalazi se negdje gore, jer se sada njegova lokacija računa u odnosu na prozor preglednika. Sada dajemo blok s klasom Relativna-div Vlasnički položaj: relativno i "prodorni sin" vraća se na svoje mjesto. Gotovo. Zapravo, pojavljuje se u gornjem lijevom kutu elementa roditelja.

Zašto se to događa? Točka je u specifičnosti svojstva položaja: apsolutni. Prema zadanim postavkama, njezin položaj ovisi o prozoru preglednika, ali ako je i "roditelj" postavljen na neki drugi način statična, Položaj počinje ovisiti o elementu roditelja. To je vrlo povoljno, jer komponenta možete postaviti bilo gdje, bez izračuna velikih brojeva u odnosu na prozor preglednika. Prijem se često koristi za postavljanje ikona, gumba i drugih sitnih stavki.

Postavite CSS u sredinu

Jedna od glavnih poteškoća za početnike je usredotočiti element vertikalno i horizontalno. Ispravno upotrebljavanje svojstva Položaj, kako bi se olakšalo. CSS položaj: apsolutni u sredini je podešen kako slijedi. Pretpostavimo da imate div s razredom apsolutna-div, koji je u "divi" s klasom Relativna-div. "Roditelj" je relativno postavljen i njegova je širina jednaka širini cijele stranice. "Dijete" ima širinu i visine 400 px, apsolutno pozicioniranje i zadano se nalazi u gornjem lijevom kutu roditeljskog elementa.

Sve što trebate učiniti jest postaviti apsolutnu komponentu vrh: 50% i lijevo: 50%. Gotovo je gotov! Apsolutni-div preselio se s mjesta i bio je gotovo u sredini, ali ne sasvim. Srednji "roditelj" dodiruje njezin rub, i trebamo da središte "potomka" bude u središtu bloka. Za to morate ga pitati margin-left i margin-right s vrijednostima od -200 px. Na taj način premjestit ćemo apsolutno postavljen blok do polovice njegove visine i širine. Sve, on je u središtu!

Komponente preklapaju

Problem može biti teško, na prvi pogled, "preklapanje" pozicioniranih elemenata na "susjedima". Na primjer, komponenta s pozicijom: fiksno preklapaju se sve što se nalazi na stranici. Da biste ispravili situaciju, moguće je pomoću imovine Z-indeksa, no sjetite se da radi samo za pozicionirane elemente. Prema tome, ako želite postaviti blok na fiksni pozicionirani element, ovaj blok će također morati biti postavljen. Na primjer, rodbina.

Lnačin učenja pozicioniranja - razmotrite primjere Pozicija CSS, eksperimentirajte i pokušajte nešto svojom. Pokušajte naučiti kako je upotrebljavati zajedno s funkcijom calc () - to će vam dati priliku da fleksibilnije prilagodite lokaciju. Međutim, imajte na umu da ovo svojstvo nije dizajnirano za izradu cjelokupne "rešetke" stranice. Pomoću nje morate premjestiti relativno male elemente, inače se možete previše zbuniti.