Poziciju u odnosu - što je to? detaljan opis

Nesting HTML - dugotrajan proces, rigorozna, ali vrlo kreativni. Uprkos činjenici da za većinu ljudi zaposlenih u IT, raspored web stranice mogu izgledati dosadnu rutinu, specijalista koji imaju zanimanje za takav slučaj, ne samo kvalitativno izvršiti zadatak, ali i dobio od procesa materijalne zadovoljstvo.

Međutim, prije nego što postane iskusan programer, svaki novajlija provodi puno vremena proučavajući razne upute i specifikacije i HTML jezika, a na svog saveznika - CSS. O tačno šta CSS, šta je to i šta je "finta uši" omogućava vam da se, kao i jedan od svojih svojstava - Položaj Relativna - danas ćemo razgovarati.

Što je CSS?

CSS Skraćenica može biti prepisan i prevedeni na ruski kao "kaskadni stil listova". To zvuči prilično čudno - s jedne strane, čini se jasnim, i riječi, a na drugoj - opšte značenje nije odmah zarobljen. Počnimo sa jednostavan - sa stilom. Ova tehnologija omogućava vam da pričvrstite objekte na stranici, određene karakteristike u pogledu pojave koje možete samo registrirati jednom i koristiti bezbroj puta.

Riječ "sto" u službeni prevod pojavio gotovo slučajno - u stvari, više odgovara ovdje bi bilo da se koristi riječ "liste" ili "liste", međutim, autori originalnog prevoda odlučio da CSS izgleda kao više od liste, a ko smo takva je sada da ih probati.

Konačno, riječ "Cascade". Činjenica je da svaki element može imati nekoliko stilova koji se mogu miješati, pa čak i preklapaju. U takvim slučajevima, pretraživač mora posegnuti za skup pravila, kako bi se sastaviti izgled bloka, koji se ispostavilo da je nekoliko stilova, a jedan od njih, na primjer, ima Relativna imovine Pozicija, a drugi - Položaj Apsoluta. U stvari, takvi sukobi ne može se tolerirati, ali u velikim projektima kao zbunjenost se događa prilično često.

Tako da sada, kada je sve jasno iz naziva, pogledajmo jednostavan primjer. Recimo svoje stranice bi trebao biti veliki broj dugmadi, dizajniran na određeni način. Imaju svojstva kao što su veličina, sjena, neprozirnost, boja. Naravno, možete odrediti ove parametre, stvarajući svako dugme, ali je mnogo lakše koristiti CSS. U praksi, potrebno je opisati određene klase, koji navodi vrijednosti svih navedenih osobina, a onda, umjesto duge liste, oznaka svakog dugmeta samo će morati da navedete ime klase, a zatim sama pretraživač će obojiti ovi elementi u željenu boju i dati im odgovarajuće "sjaj".

Šta imovinu pozicije?

Sada nastavite izravno na imovinu Pozicija, zbog kojih je pokrenut cijeli ovaj članak. Ako ste upoznati sa engleskim jezikom, ili imaju dobru intuiciju, onda bi trebalo već biti jasno - ove nekretnine je odgovoran za lokaciju stavke. U stvari, način na koji je to, ali umjesto toga odrediti određenu lokaciju, ove nekretnine govori preglednik kako to treba staviti na jedan ili drugi element u odnosu na susjedni ili preko stranice u cjelini.

Koje vrijednosti može imovinu pozicije?

Naša imovina može prihvatiti nekoliko različitih vrijednosti, postoje samo pet. Ovdje je kratak opis svake:

• Položaj Naslijedio. Ova funkcija vam omogućava da kopirate podatke o položaju element koji je roditelj. Na primjer, ako imate div sa određenim poziciju u odnosu, a onda ušao u njega sa IMG vrijednosti naslediš također će biti postavljen na relativno.
• Postavite Statički. Ova vrijednost se automatski daje sve elemente, osim ako nije navedeno više. Elementi uklapaju u položaj kao što je navedeno u kod i nisu dostupni za razne "suvišnih", dozvoljavajući da promene svoju poziciju.
• Položaj Apsoluta. Do ove vrijednosti imovine Pozicija se vrlo često koristi u slučajevima kada je potrebno da se stvori "plutajući" element. Sa obzirom vrijednost stavke imovine "nevidljivi" za ostale komponente stranice. To jest, oni su raspoređeni kao da naš apsolutni element ne postoji. On sam će uvijek biti na mjestu, bez obzira na to koliko je pomicana stranici.
• Položaj Fixed. Na mnogo načina, ova vrijednost je sličan prethodnom, međutim, dok je apsolutni element vezan za roditelja, fiksni koristi samo koordinate gornjem lijevom uglu ekrana pretraživača, zanemarujući ostale elemente koji su mu prethodili.
• Konačno, poziciju u odnosu. Ovaj tip vrijednosti omogućuje element pozicioniranja u odnosu na drugi, što može biti korisno za stvaranje adaptivnih oznaka pod nazivom zajedničko "gumenim". Sa ovim imovine, artikl će "gurati" s druge strane, bez gubitka sposobnosti da promijene svoj stav na stranici.

Rad sa pozicije u različitim preglednicima

Nisu sve pretraživači su jednako kompatibilni. Dok većina alternativnih programa za pregledavanje Interneta bez trzavica percipiraju vrijednost pozicije je apsolutno istina ", hronično poseban» Internet Explorer smatra imovine, ovisno o verziji.

Na primjer, koristeći već "sahranili" preglednik IE6, ne možete koristiti vrijednost osnovnih i Naslijedio - "magarac", oni jednostavno ignorisati. Međutim, bez obzira na činjenicu da je sedma verzija situacija je počela da se poboljša, i Fixed već obrađuju, da naslede voljeni "browser za preuzimanje drugih pretraživača," postigli samo u svojoj osmoj inkarnaciji.

Ostatak posmatrača mirno nositi Pozicija u prvoj verziji, sa izuzetkom Opera, koji je dobio podršku od imovine u svoja 4 varijacije, objavljen je sredinom 90-ih godina.

Rad sa Pozicija u Javascript

U stvari, priča o tome kako raditi s imovinom Pozicija u Javascript je, mi smo uključeni samo zbog pristojnosti. Jer ovaj objekt nema nikakve posebne znakove u naslovu, možete koristiti JS bez ikakvih promjena, na primjer, za postavljanje div poziciju u odnosu, treba uključiti liniju ovako: div.style.position = 'relativne'.

Kao što možete vidjeti, to je prilično jednostavno.

Zašto poziciju u odnosu zaslužuje posebnu pažnju?

Dok je većina imovine vrijednosti pozicija, blago rečeno, "pljunuo" na okolnim elementima, koristeći vrijednost "položaj stil: relativna", uvek treba zapamtiti o čitavu stranicu u cjelini, jer nepravilna upotreba može snažno "skew" cijeli sadržaj ekrana .

Osim toga, ova nekretnina samo vam omogućuje da lako pretvoriti dizajn fiksne adaptivni, jer će njegova primjena automatski utjecati na sve stranice sadržaj. Onda imamo još vremena da se uzme u obzir primjere i greške pomoću ove vrijednosti, pa ćete vidjeti svoje opipljive značaj u praksi.

Kada treba koristiti u odnosu pozicioniranje?

Pored klasičan raspored stranica HTML, poziciju u odnosu često se koristi za stvaranje niz zanimljivih efekata. Na primjer, ako želite stavku "Došao" na stranici ili, naprotiv, postepeno je izvan njene teritorije, to je upravo ta imovina može vam pomoći implementirati ovaj "trik".

Ove "trikove" se realizuju kroz Javascript je, ili, ako je cilj za progresivno nametanje, kroz svojstva CSS3, koji omogućuju vam da podesite ciklične promjene u vrijednosti određene varijable.

Osim toga, u nekim slučajevima moguće stvoriti "hibrid" vrijednosti pozicija u odnosu. CSS, iako ne u isto vrijeme omogućava podešavanje nešto poput position: absolute relativna, ali koristeći neke trikove, još uvijek je moguće da se to postigne efekt. Ovaj pristup može biti koristan u slučajevima gdje vam treba da stvori nešto kompleks kao alatsavetu ili pop-up izbornika. S obzirom na primjere, mi ćemo dati opis strukture takve "hibrid".

Primjeri korištenja na rang

Poziciju u odnosu - to je prilično jednostavan, ali fleksibilan alat koji vam omogućuje da sprovede niz zanimljivih efekata. Da se ne bi gubili vrijeme i mjesto za pisanje beskorisno predložak kod, predstavljamo nekoliko oralni algoritama, koji možete ukrasiti svoje stranice ili određene stranice.

Počnimo sa "isteklo" linije. Pretpostavimo da imate potrebu za element koji će "travel", jer je lijevi rub ekrana i polako ga na desnu stranu. Za implementaciju takvog "mehanizam" trebalo postaviti položaj: relativna; lijevo: -100px, gdje -100 - približan broj piksela koji čine širine bloka. Ovaj stil će vam omogućiti da sakriti jedinicu izvan ekrana, stavljajući ga u "početni položaj". Sada možete koristiti skriptu koja će povećati svakih nekoliko milisekundi napustio vrijednost imovine po jedinici sve dok ne postane jednaka širini prozora preglednika minus širinu elementa. Rezultat je jedinica koja izlazi s lijeve strane ruba, valjani preko ekrana i "parkirao" u desnoj ruci.

Drugi primjer vam omogućuje stvaranje "relativne-apsolutno" elemenata. Na primjer, možete unijeti apsolutnu unutar drugog, imaju poziciju u odnosu. Kao rezultat toga, imamo "relativna" blok koji nema veličine na koje se apsolutni je upisana, je sada u mogućnosti da se manifestuje u poziciji nezavisno od prethodnog elementa.

Tipične greške kada se koristi poziciju u odnosu

Najčešće greške prilikom korištenja poziciju u odnosu je da su mnogi web dizajneri zaboraviti mogućnost rezervirati mjesto u jedinici, što može biti smještena bilo gdje. Na primjer, ako imate prilično veliki, datum izvan ekrana i imaju relativnu pozicioniranje, na njenom mjestu će biti zjapi "rupa". Međutim, čak i ova nekretnina se ponekad stvara određene neugodnosti mogu se koristiti za dobro, na primjer, stvarajući zanimljiv efekat "samo-montaža" lokacije, gdje sve svoje blokove postepeno stavlja u najviši položaj: 0; lijevo: 0; t. e. na originalnu lokaciju.