Korijen je često teško postaviti elemente putem CSS-a. Zapravo, CSS Position svojstvo je mnogo lakše naučiti nego što se čini na prvi pogled. Nakon što ste ga savladali, dobit ćete moćan alat koji vam omogućuje da sve elemente stranice uredite na pravim mjestima. Ali da bi se postigao rezultat, potrebno je poznavati sva postojeća značenja, budući da se načela njihovih postupaka uvelike razlikuju
Specifičnost konstruiranja toka dokumenta
Pozicija CSS radi s protokom web stranice. Kako to shvatiti? Prema zadanim postavkama svi elementi stranice uređeni su redoslijedom kojim ste ih stvorili u HTML oznaci. Ako se zaglavlje oznake nalazi iznad oznake podnožja, stranica će se prikazati iznad. Isto tako, ako nekako odlučite staviti podnožje u html preko "hosta", "podrum" stranice će se prikazati iznad "šešira". U tom slučaju, blok elementi zauzimaju svu širinu koja im je dostupna. Linearni, zauzvrat, raspoređeni su u jedan red sve dok ne uzmu sve, a zatim počnu prenositi na novu. Ovaj se red zove protok dokumenta. "
Da biste promijenili ponašanje protoka, koristite svojstvo Position u CSS-u. Također se može promijeniti zbog svojstava plutanja, ali mi to nećemo uzeti u obzir. Pomoću pozicioniranja moguće je prisiliti element "ispasti" iz obične struje, nakon čega će se početi ponašati na nov način. Kako točno - ovisi o vrijednosti imovine koja se koristi.
CSS Pozicija: statična
Položaj: statična ili statička pozicija je zadana vrijednost za sve HTML blokove koje ste stvorili. U normalnim okolnostima, ne morate se nositi s tim. Ako za bilo koji blok ili liniju uopće nije naveden nijedan položaj, tada ima vrijednost static. Na stranici se ova komponenta prikazuje u skladu s potokom. Ako ga odredite desno /lijevo ili gornja /donja svojstva, neće biti učinka.
Pozicija CSS-a: fiksna
Kada se koristi ovo svojstvo, element je izvan normalnog toka dokumenta. Sada se njegova pozicija izračunava u odnosu na prozor preglednika, bez obzira na to kako su smještene druge komponente. Drugim riječima, Položaj: fiksni blok će ići na vrh stranice, pričvrstiti na rub prozora preglednika, a ostali elementi će zauzeti njegovo mjesto u skladu s potokom.
Glavno obilježje elemenata s fiksnim rangom je da mogu preklapati druge blokove i nizove stranica. Kada pomičete blok s Položaj: fiksno, čini se da će ostati na mjestu, bez nestajanja sa zaslona. To je korisno ako trebate napraviti navigaciju ili sličnu stavku kojoj korisnik uvijek mora imati pristup. Fiksno pozicioniranje vrijedi i ako želite postaviti gumb za brzo pomicanje na određeni dio stranice.
CSS Pozicija: relativna
Korištenje ovog svojstva naziva se relativno pozicioniranje. Ako postavite svojstvo stavke Pozicija: relativna, onaće ostati na mjestu. Na prvi pogled, ništa posebno se neće dogoditi, ali sve će se promijeniti ako koristite svojstva desno /lijevo i vrh /dno dodatno. Uz njihovu pomoć možete kontrolirati kretanje komponente u odnosu na njezino mjesto. Na mjestu gdje je blok bio prije, bit će prazan prostor - ostali elementi će ostati na svojim mjestima, ne obraćajući pozornost na prazan prostor.
Kod pomicanja dijelova ne utječe na položaj okolnih dijelova stranice. Oni će ostati na svojim mjestima, iako ih blokirani blok može blokirati. Sama imovina se rijetko koristi. Obično se koristi u kombinaciji sa sljedećom opcijom.
Apsolutno pozicioniranje
Jedna od najzanimljivijih i najčešće korištenih varijanti. Kada koristite svojstvo Position s apsolutnom vrijednošću komponente, komponenta stranice će se računati na prozor preglednika. Ostali elementi (ne apsolutno pozicionirani) kao da "zaboravljaju" na postojanje "sestre" sa Položaj: apsolutni i zauzimaju svoje mjesto u potoku. Čini se da je sve točno isto kao u slučaju Položaj: fiksno, ali postoje ozbiljne razlike.
Prije svega, položaj elementa može se slobodno kontrolirati - za to se koriste svojstva vrh /desno /dno /lijevo. Na primjer, ako postavite donju vrijednost na: 100px, blok će "stajati" s dna stranice za 100 piksela. Drugo, kada je pomicanje "apsolutna" komponentaće ostati na mjestu umjesto da se kreću kroz stranicu.
Interakcija apsolutnih blokova s roditeljskim elementima
Moguće je postići još precizniju kontrolu nad apsolutno pozicionirajućom komponentom. Da biste to učinili, morate postaviti imovinu njegovog oca Pozicija: fiksna, relativna ili apsolutna. Razmotrite primjer. Imate div s relativnom-div klasom, unutar koje postoji div klasa s apsolutnom div klasom. Unutarnji blok postavljamo na Položaj: apsolutni. Odjednom "odleti" iz potoka i pojavi se negdje iznad, jer se sada njegova lokacija izračunava u odnosu na prozor preglednika. Sada postavljamo blok s relativnom-div klasom Pozicija: relativna i "izgubljeni sin" se vraća na mjesto. Gotovo. Zapravo, pojavljuje se u gornjem lijevom kutu roditeljskog elementa.
Zašto se to događa? Slučaj u specifičnostima Položaja: apsolutna svojina. Po defaultu, njegovo stanje ovisi o pregledniku, ali ako je "roditelj" također smješten negdje statički, položaj počinje ovisiti o nadređenom elementu. To je vrlo zgodno jer komponentu možete smjestiti bilo gdje, bez brojanja golemih brojeva u prozoru preglednika. Prijem se često koristi za postavljanje ikona, gumba i drugih sitnih predmeta.
Postavite CSS u središte
Jedna od glavnih poteškoća za početnike je centriranje elementa vertikalno i horizontalno. Pravilnim korištenjem svojstva položaja lakše je pojednostavniti. CSS Pozicija: apsolutna u središtuje postavljen na sljedeći način. Na primjer, pretpostavimo da imate d iv s apsolutnom div klasom, koja je u božanskom s relativnom-div klasom. "Otac" je postavljen s obzirom na njegovu širinu jednaku širini cijele stranice. "Potomak" ima širinu i visinu od 400 px, apsolutno pozicioniranje i po defaultu se nalazi u gornjem lijevom kutu roditeljskog elementa.
Sve što trebate učiniti je postaviti apsolutnu gornju komponentu: 50% i lijevo: 50%. Gotovo gotovo! Apsolutno-div se preselio s mjesta i našao se gotovo u središtu, ali ne uopće. Sredina "oca" odnosi se na njegovu regiju i trebamo usredotočiti centar "potomka" u središtu bloka. Da biste to učinili, morate postaviti margin-left i margin-right s vrijednostima -200 px. Tako ćemo pomaknuti apsolutno pozicionirani blok za polovicu njegove visine i širine. Sve što je u središtu!
Preklapanje komponenata
Problem može biti kompliciran, na prvi pogled, "prekriti" elemenata pozicioniranja na svojim "susjedima". Na primjer, komponenta s Položaj: fiksno preklapa se sa svime što se nalazi na stranici. Možete popraviti situaciju koristeći svojstvo z-index, ali imajte na umu da radi samo za pozicionirane stavke. Prema tome, ako želite postaviti blok na stavku s fiksnom pozicijom, ovaj blok će također morati postaviti pozicioniranje. Na primjer, relativna. Najbolji način ovladavanja pozicioniranjem je pogledati primjere položaja CSS, eksperimentirati i pokušati nešto u svom. Pokušaj učitikoristite ga zajedno s funkcijom calc () - to će vam omogućiti fleksibilnije konfiguriranje mjesta. Međutim, imajte na umu da ova nekretnina nije namijenjena za izgradnju cijele mreže stranica. Koristite ga za pomicanje relativno malih elemenata, inače može biti vrlo lako zbuniti.
Glavno obilježje elemenata s fiksnim rangom je da mogu preklapati druge blokove i nizove stranica. Kada pomičete blok s Položaj: fiksno, čini se da će ostati na mjestu, bez nestajanja sa zaslona. To je korisno ako trebate napraviti navigaciju ili sličnu stavku kojoj korisnik uvijek mora imati pristup. Fiksno pozicioniranje vrijedi i ako želite postaviti gumb za brzo pomicanje na određeni dio stranice.
