Položaj u odnosu - što je to? detaljan opis

Gniježđenje HTML - dugotrajan proces, strog, ali vrlo kreativni. Unatoč činjenici da je za većinu ljudi zaposlenih u IT, web stranice izgled može izgledati dosadno rutinu, stručnjaci koji imaju zvanje za takav slučaj, ne samo kvalitativno izvršiti zadatak, ali također dobiti od procesa opipljiv užitak.

Međutim, prije nego što ste postali iskusni koder, svaki pridošlica troši puno vremena proučavajući razne upute i specifikacije oba HTML jeziku, a na svom savezniku - CSS. O točno što su CSS, što je i što „finta uši” vam omogućuje da biste dobili gore, kao jedan od svojih glavnih svojstava - položaj u odnosu - danas ćemo razgovarati.

Što je CSS?

CSS naziv može transkribirati i preveden na ruski kao „Cascading Style Sheets”. To zvuči prilično čudno - s jedne strane, čini se, a riječi, as druge - opći smisao nije odmah zarobljeni. Počnimo s jednostavnim - sa stilom. Ova tehnologija omogućuje vam pričvršćivanje predmeta na stranici, određene karakteristike u pogledu izgleda da možete samo registrirati jednom i koristiti neograničeni broj puta.

Riječ „stol” u službeni prijevod pojavio gotovo slučajno - u stvari primjereniji ovdje bi se koristiti riječ „liste” ili „liste”, međutim autori izvornom prijevodu odlučili da je CSS izgleda kao više od popisa, a tko smo takva je sada da ih isprobate.

Konačno, riječ „Cascade”. Činjenica je da svaki element može imati nekoliko stilova koji se mogu miješati ili čak preklapaju. U takvim slučajevima, preglednik mora posegnuti za skup pravila, u cilju stvaranja izgled bloka, što se pokazalo nekoliko stilova, s jednim od njih, na primjer, ima relativnu imovine poziciju, a drugi - Položaj Apsolut. Zapravo, takvi sukobi ne može se tolerirati, ali u velikim projektima kao zbrka događa prilično često.

Pa i sada, kada je sve jasno iz imena, pogledajmo jednostavan primjer. Recimo da je vaš site bi trebao biti veliki broj gumba, dizajnirani na određeni način. Oni imaju svojstva kao što su veličina, sjene, neprozirnost boje. Naravno, možete odrediti tih parametara, stvarajući svaki gumb, ali je puno lakše koristiti CSS. U praksi, potrebno je opisati određenu klasu, koja navodi vrijednosti svih gore navedenih svojstava, a onda, umjesto dugog popisa oznaka za svaki gumb će samo morati navesti ime klase, onda sama preglednik će boja tih elemenata u željenu boju i dati im odgovarajuće „sjaj”.

Što vlasništvo pozicija?

Sada prijeđite izravno na mjesto imovine, zbog kojih je pokrenut cijeli ovaj članak. Ako ste upoznati s engleskog jezika, ili imati dobru intuiciju, onda već trebalo biti jasno - ovo svojstvo je odgovoran za položaj stavke. Naime, način na koji je to, ali umjesto toga odrediti određeno mjesto, ovo svojstvo govori browseru kako to treba biti postavljeni jedan ili drugi element s obzirom na susjedni ili preko stranice u cjelini.

Koje vrijednosti može vlasništvo pozicija?

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

• Naslijedi položaj. Ova značajka omogućuje kopiranje podataka o položaju elementa koji je roditelj. Na primjer, ako imate div s određenom relativnom položaju, a zatim je ušao u nju s IMG naslijediti vrijednosti također će biti postavljen na relativno.
• Postavite statičan. Ova vrijednost je na svim elementima automatski, osim ako više navedeno. Elementi uklapaju u položaj kao što je spomenuto u kodu i nisu dostupni za razne „osnovni”, dopuštajući da promijeni svoj položaj.
• Pozicija Apsolut. Ovom vrijednošću imovine Pozicija vrlo često se koristi u slučajevima kada je potrebno da se stvori „plutajući” elementa. S određenom vrijednosti stavke nekretnina je „nevidljivi” za ostale komponente stranice. To jest, oni su raspoređeni kao da je naša apsolutna element ne postoji. On sam će uvijek biti na mjestu, bez obzira na to koliko je pomicana stranicu.
• Pozicija Fiksni. Na mnogo načina, ta vrijednost je slična prethodnoj, međutim, dok je apsolutni element vezan za roditelja, fiksna koristi samo koordinate gornjeg lijevog kuta zaslona preglednika, ne obazirući se na ostale elemente koji su mu prethodili.
• Na kraju, položaj u odnosu. Ova vrsta vrijednosti omogućuje pozicioniranje elemenata u odnosu na drugi, što može biti korisno za stvaranje prilagodljivog oznaka naziva u zajednički „gume”. S ovog objekta, stavka će „gurati” s druge strane, ne gubeći sposobnost da promijeni svoj položaj na stranici.

Rad s pozicija u različitim preglednicima

Nisu svi preglednici su jednako kompatibilni. Dok većina alternativni programi za surfanje Internetom bez hitches uočenih vrijednosti pozicija je apsolutno istinito, „kronično posebna» Internet Explorera smatra imovine, ovisno o verziji.

Na primjer, koristeći već „pokopali” preglednik IE6, ne možete koristiti vrijednost fiksnih i naslijediti - „magarca” oni jednostavno ignorirati. Međutim, unatoč činjenici da je sedma verzija situacija počela poboljšavati, a fiksnom već obrađene, naslijediti dragi „preglednik za preuzimanje druge preglednike,” postignut samo u svojoj osmoj inkarnaciji.

Ostatak promatrača smireno nositi s pozicija s prvom verzijom, uz iznimku Opere, koji je dobio potporu svojstva u svoje 4 varijacije, objavljenoj sredinom 90-ih godina.

Rad s položaja u Javascript

U stvari, priča o tome kako raditi s imovinom Pozicija u Javascript je, mi smo uključeni samo zbog pristojnosti. Budući da je ovaj objekt nema nikakve posebne znakove u naslovu, možete koristiti JS bez ikakvih promjena, na primjer, postaviti div položaj u odnosu, treba sadržavati ovakav red: div.style.position = „relativna”.

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

Zašto Relativne zasluge Pozicija posebna pozornost?

Dok je većina od vrijednosti imovine položaju, blago rečeno, „pljune” na okolnim elementima, pomoću vrijednosti „poziciju u stilu: relativna”, uvijek treba imati na umu o cijeloj stranici u cjelini, jer nepravilno korištenje može snažno „izvrtati” cijeli sadržaj zaslona ,

Osim toga, ovo svojstvo samo vam omogućuje da lako pretvoriti fiksni dizajn prilagodljiva, jer je njegova aplikacija će automatski utjecati na sve stranice sa sadržajem. Onda još imamo vremena da razmislite primjere i pogreške Koristeći ovu vrijednost, i vidjet ćete svoje materijalne značaj u praksi.

Kada trebate koristiti relativnu poziciju?

Osim konvencionalnog izgleda stranica HTML, relativna pozicija se često koristi za izradu raznih zanimljivih efekata. Na primjer, ako želite neku stavku „došao” na stranici ili, naprotiv, postupno je otišao izvan svog teritorija, to je upravo to svojstvo može vam pomoći implementirati ovaj „trik”.

Ove „trikove” se provode kroz Javascript je, ili, ako vam je cilj za progresivne nametanja, kroz svojstvima CSS3, koji omogućuju vam da prilagodite periodički promjenu vrijednosti određene varijable.

Osim toga, u nekim slučajevima moguće stvoriti relativna „hibrid” vrijednosti položaja. CSS, iako ne u isto vrijeme omogućuje vam da postavite nešto kao položaj: apsolutni odnosu, ali pomoću neke trikove, to je još uvijek moguće postići taj efekt. Ovaj pristup može biti koristan u slučajevima gdje vam treba stvoriti nešto kompleks kao u tooltip ili pop-up izbornika. S obzirom na primjere, mi ćemo dati opis strukture takvog „hibrid”.

Primjeri korištenja relativni poredak

Položaj u odnosu - to je prilično jednostavan, ali fleksibilan alat koji vam omogućuje da primijeniti različite zanimljive efekte. Kako ne gubiti vrijeme i mjesto za pisanje beskorisno kod predloška, donosimo nekoliko usmenih algoritama, koji mogu ukrasiti svoje stranice ili određene stranice.

Počnimo s „ponestane” liniju. Recimo da imate potrebu za element koji će „putovati”, jer lijevi rub zaslona i polako ga premjestiti na desnu stranu. Za provedbu takvog „mehanizam” trebalo postaviti položaj: rođak; lijevo: -100px, gdje -100 - približan broj piksela koji čine širine bloka. Ovaj stil će vam omogućiti da sakriti jedinicu izvan ekrana, smještajući ga u „početni položaj”. Sada možete koristiti skriptu koja će povećati svakih nekoliko milisekundi ostavili vrijednost imovine po jedinici sve dok to ne postane jednaka širini prozora preglednika minus širini elementa. Rezultat je jedinica koja dolazi iz lijevog ruba, otkotrljao preko ekrana i „parkirao” u desnoj ruci.

Drugi primjer vam omogućuje stvaranje „rođak-apsolutne” elemente. Na primjer, možete unijeti apsolutno u drugi, imaju relativni položaj. Kao rezultat toga, imamo „relativni” blok koji nema veličine na koje je upisano apsolutna, sada može manifestirati u poziciji neovisno od prethodnog elementa.

Tipične greške kada se koristi relativni položaj

Najčešća pogreška prilikom korištenja relativni položaj je u tome što mnogi web dizajneri zaboraviti mogućnost da rezervirati mjesto u jedinici, što može biti smještena bilo gdje. Na primjer, ako imate prilično velik, stavljen izvan ekrana i ima relativnu poziciju, na njenom mjestu će biti zurenje „rupa”. Međutim, čak i ova nekretnina je ponekad stvara određene neugodnosti mogu se koristiti za dobro, na primjer, stvaranje zanimljiv učinak „self-montaže” stranice, gdje sve njene blokova postupno su smješteni u gornjem položaju: 0; lijevo: 0; t e.. na izvornom mjestu.