Položaj relativno - što je to? Detaljan opis

HTML izgled je dug proces, skrupulozan, ali vrlo kreativan. 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 postane iskusan web dizajner, svaka novakinja troši puno vremena učeći različite upute i specifikacije za HTML jezik i saveznički CSS. Radi se o tome, što je CSS, što je to i što „finta uši” vam omogućuje da bi se, kao i jedan od njegovih najboljih svojstava - položaj u odnosu - danas ćemo razgovarati.

Što je CSS?

Kratica CSS može se dešifrirati i prevesti na ruski kao "kaskadni stilski listovi". Zvuči sasvim čudno - s jedne strane, kao i riječi i razumljivo, ali s druge strane - opće značenje ne ulijeva se odmah. Počnimo s jednostavnim - s stilovima. Ova tehnologija omogućuje vam da na stranicama daju predmete određene karakteristike koje se odnose na izgled, što se može propisati samo jednom, ali koristi beskonačno mnogo 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 tako da se sada sudi.

Konačno, riječ "kaskada". Činjenica je da svaki element može istodobno imati više stilova, koji se mogu miješati ili čak presijecati. U takvim slučajevima preglednik mora koristiti određena pravila kako bi pravilno oblikovao izgled bloka koji ima više stilova, dok jedan od njih, na primjer, ima svojstvo položaja i drugi - položaj apsolut. U stvari, takvi se sukobi ne mogu tolerirati, ali u velikim projektima takva konfuzija se događa vrlo često.

Dakle, sada kada je ime jasno, pogledajmo jedan jednostavan primjer. Pretpostavimo da na vašoj web-lokaciji imate veliki broj gumba koji su uređeni na određeni način. Imaju takva svojstva kao što su veličina, sjena, prozirnost, boja. Naravno, možete odrediti ove parametre, stvarajući svaki gumb, ali će biti 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”.

Zašto trebam posjedovati položaj?

Sada se krećimo izravno na poziciju, za koju je zamišljen cijeli članak. Ako ste upoznati s engleskim jezikom ili imate dobru intuiciju, onda biste već trebali razumjeti - ovo je vlasništvo odgovorno za mjesto elementa. Zapravo, to je istina, ali umjesto definiranja određenog mjesta, ova nekretnina govori pregledniku kako točno staviti stavku u odnosu na susjednu ili cijelu stranicu kao cjelinu.

Koje vrijednosti mogu preuzeti pozicija?

Naša imovina može potrajati nekoliko različitih vrijednosti, ima samo pet njih. Evo kratkog opisa svake od njih:

• Položaj nasljeduje. Ovo svojstvo omogućuje kopiranje podataka o položaju stavke koja je roditelj. Na primjer, ako imate div s određenom pozicijskom relativnošću, upisani IMG s naslijeđenom vrijednošću također će dobiti vrijednost Relative.
• Statički položaj. Ta se vrijednost automatski dodjeljuje svim elementima, osim ako nije drugačije navedeno. Elementi se uklapaju u poziciju kako su navedeni u kodu i nisu dostupni za razne "delicije" koje im omogućuju da promijene položaj.
• Apsolutno mjesto. Ova vrijednost vlasničkog položaja često se koristi u slučajevima kada je potrebno stvoriti "plutajući" element. Imajući tu vrijednost svojstva, element ostaje "nevidljiv" za ostatak stranice. To jest, oni se nalaze kao da naš apsolutni element uopće ne postoji. On će uvijek ostati na svom mjestu, bez obzira koliko je stranica bila pomicana.
• Položaj je fiksan. U mnogim aspektima ta je vrijednost slična prethodnom, međutim, apsolutni element pričvršćen je na roditelj, a fiksno upotrebljava samo koordinate gornjeg lijevog kuta zaslona preglednika, a ne obraća pozornost na druge elemente koji su prethodili.
• Naposljetku, položaj relativno. Ovom vrstom vrijednosti možete postaviti element u odnosu na druge, što može biti korisno prilikom izrade prilagodljivog označavanja, nazvanog "gumena" u običnim ljudima. Imajući ovu imovinu, element će "premjestiti" ostatak, bez gubitka mogućnosti promjene položaja na stranici.

Značajke rada s položajem u različitim preglednicima

Nisu svi preglednici jednako kompatibilni. Dok je većina alternativnih programa za surfanje internetom bez ikakvog hitchinga percipira vrijednost pozicije, apsolutno je istina, "kronicno poseban" Internet Explorer smatra ovu imovinu ovisno o svojoj verziji.

Na primjer, koristeći već zakopani IE6 preglednik, ne možete koristiti vrijednosti Fixed i Inherit - magarac ih jednostavno ignorira. Međutim, unatoč činjenici da je od sedme verzije situacija počela ispravljati, a fiksna je već obrađena, naslijedili su svi sviđali da je "preglednik za preuzimanje drugih preglednika" dobio samo u osmom obliku.

Ostali recenzenti tiho obrađuju poziciju od prvih verzija, s izuzetkom Opera, koji je stekao podršku za ovu nekretninu u svojoj četvrtoj varijaciji, objavljenoj sredinom 90-ih.

Rad s pozicijom u jаvascriptu

Zapravo, priča o tome kako raditi sa svojstvom Pozicija u jаvascriptu, uključili smo se samo radi ispravnosti. Budući da u ovom imenu nema posebnih znakova, možete upotrijebiti JS bez ikakvih promjena, na primjer, da biste postavili pozicijski relativni div, trebali biste uključiti ovu liniju: div.style.position = lsquo-relativersquo-.

Kao što možete vidjeti, sve je jednostavno.

Zašto pozicijski odnosi zaslužuju posebnu 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, samo vam ta svojstva omogućuju jednostavno pretvorbu fiksnog dizajna u prilagodljivu, jer njezina primjena automatski utječe na cijeli sadržaj stranice. Zatim, još uvijek imamo vremena razmotriti primjere i pogreške u korištenju ove vrijednosti, a praktično ćete vidjeti svoju konkretnu vrijednost.

Kada trebam koristiti relativno pozicioniranje?

Pored izgleda konvencionalnih HTML stranica, Relativni položaj često se koristi za stvaranje različitih zanimljivih efekata. Na primjer, ako želite da neki element "dođe" na stranicu ili, naprotiv, glatko krene za svojim rubovima, onda vam ovo svojstvo može pomoći da implementirate ovaj "glup".

Slične "trikove" provode se putem jаvascripta ili, ako težite za progresivnim izgledom, kroz svojstva CSS3, koji vam omogućuju konfiguriranje cikličke promjene u vrijednosti varijable.

Osim toga, u nekim je slučajevima moguće stvoriti "hibridne" Relative vrijednosti položaja. CSS, iako vam ne dopušta da istodobno postavite nešto poput pozicije: apsolutni rođak, ali pomoću nekih trikova, još uvijek možete postići taj učinak. Ovaj pristup može biti koristan u onim slučajevima kada je potrebno stvoriti nešto poput kompleksa tooltip ili kontekstnog izbornika. S obzirom na primjere, svakako ćemo opisati strukturu takvog "hibrida".

Primjeri upotrebe relativnog pozicioniranja

Relativni položaj relativno je jednostavan, ali fleksibilan alat koji vam omogućuje da implementirate mnoge 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 linijom "istječu". Pretpostavimo da imate potrebu za elementom koji će "putovati" iza lijevog ruba zaslona i postupno se prebaciti na desnu stranu. Za provedbu takvog „mehanizam”, postavljen pozicija: nam veoma lijevo: -100px, gdje -100 - približan broj piksela koji čine širine bloka. Taj stil omogućuje skrivanje bloka izvan zaslona postavljajući ga na "početnu poziciju". 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 omogućuje stvaranje "relativno apsolutnih" elemenata. Na primjer, možete unijeti apsolutni unutar drugog koji ima 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.

Uobičajene pogreške pri korištenju položaja relativno

Najčešća pogreška pri korištenju položaja relativno je da mnogi dizajneri izgleda zaboravljaju na mogućnost rezerviranja prostora za blok koji može biti bilo gdje. Na primjer, ako imate prilično veliko, postavljeno izvan zaslona i relativno pozicioniranje, na njemu će se pojaviti "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 stavlja u poziciju top: 0- lijevo: .. 0- odnosno njegova izvorna mjesto.