/ / Relativni položaj - što je to? Detaljan opis

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

HTML kodiranje - dugi, pedantan procesali vrlo kreativan. Unatoč činjenici da za većinu ljudi koji rade na području IT-a, izgled web stranica može izgledati kao dosadna rutina, stručnjaci koji imaju poziv za takav posao ne samo da obavljaju poslove kvalitativno, već također primaju znatne zadovoljstvo procesa.

Međutim, prije nego što postane iskusan koder,svaki novinar troši puno vremena proučavajući različite upute i specifikacije za HTML jezik i saveznički CSS. Riječ je o tome što je CSS, za što je to, a ono što se "utiskuje s ušima" omogućava nam da se podignemo, kao i jedno od njegovih popularnih svojstava - Relativni položaj - danas ćemo govoriti.

Što je CSS?

položaj relativno
CSS kratica može se dekodirati ipreveden na ruski kao "kaskadni stilski listovi". Zvuči prilično čudno - s jedne strane, čini se da su riječi razumljive, ali s druge strane - opće značenje se ne percipira 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, koje se mogu propisati samo jednom, a koriste beskonačno mnogo puta.

Pretvorena je riječ "stol" u službenom prijevodugotovo slučajno - u stvari, bilo bi prikladno koristiti riječ "listovi" ili "popisi", ipak, autori početnog prijevoda odlučili su da se CSS tablica izgleda više od popisa i tko ih sada trebamo suditi.

Konačno, riječ "kaskadno". Činjenica je da svaki element može imati više stilova odjednom, što može miješati ili čak presijecati. U takvim slučajevima preglednik mora pribjeći skupu pravila kako bi se pravilno uskladio izgled blokova koji ima više stilova, a jedan od njih, na primjer, ima svojstvo položaja, a drugi - Apsolut. U stvari, takvi sukobi ne bi trebali biti dopušteni, ali u velikim projektima takva zbrka se događa vrlo često.

Tako sada, kada je sve jasno s imenom,Pogledajmo jedan jednostavan primjer. Pretpostavimo da vaša web-lokacija ima velik broj gumba, dizajniranih na određeni način. Imaju takva svojstva kao što su veličina, sjena, prozirnost, boja. Naravno, te parametre možete odrediti tako da izradite svaki gumb, ali će biti puno lakše koristiti CSS. U praksi morate opisati klasu u kojoj će biti navedene vrijednosti svih gore navedenih svojstava, a zatim, umjesto dugog popisa, u oznaci svakog gumba trebate navesti samo ime ove klase, nakon čega će preglednik slikati te elemente u željenim bojama i dati im odgovarajuću „sjaj”.

Što je za položaj?

Sada se pretvaramo izravno na nekretninuPozicija, zbog čega je započeo sav ovaj članak. Ako ste upoznati s engleskim jezikom ili imate dobru intuiciju, onda biste već trebali biti jasni - ovo je vlasništvo odgovorno za mjesto elementa. Zapravo, onako kako jest, ali umjesto definiranja određenog mjesta, ova imovina govori pregledniku točno kako se taj element ili element trebao postaviti u odnosu na susjede ili cijelu stranicu kao cjelinu.

položaj HTML pozicije

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 vam kopiranje podataka o položaju za element koji je roditelj. Na primjer, ako imate div s određenom pozicijskom relativnošću, IMG upisan u njega s vrijednosti nasljeđivanja dobit će i vrijednost Relative.
  • Statički položaj. Ova se vrijednost automatski dodjeljuje svim elementima, osim ako nije drugačije navedeno. Elementi se uklapaju u poziciju kako su spomenuti u kodu i nisu dostupni za razne "rubove" koji im omogućuju da promijene položaj.
  • Apsolutno mjesto. Ova vrijednost vlasničkog položaja često se koristi kod slučajeva kada je potrebno stvoriti "plutajući" element. Posjedujući ovu vrijednost svojstva, element ostaje "nevidljiv" za preostale dijelove stranice. To jest, oni su raspoređeni 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. Na mnoge načine, ta je vrijednost slična prethodnom, međutim, apsolutni element pridružen je roditelju, a fiksna upotrebljava samo koordinate gornjeg lijevog kuta zaslona preglednika, a ne obraća pozornost na ostale elemente koji su prethodili.
  • Naposljetku, položaj relativno. Ova vrsta vrijednosti omogućuje postavljanje elemenata u odnosu na druge, što može biti korisno prilikom izrade adaptivnog označavanja, nazvanog "gumena" u običnim ljudima. Imajući ovo svojstvo, element će "odvojiti" ostatak bez gubitka prilika da promijeni svoj položaj na stranici.

stilu u odnosu na stil

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

Nisu svi preglednici jednako kompatibilni. Iako većina alternativnih programa za internet surfanje bez ikakvih smetnji uočavaju vrijednost položaja apsolutno ispravno, "kronično poseban" Internet Explorer smatra ovu nekretninu ovisno o njegovoj verziji.

Na primjer, upotreba već "pokopanog" preglednikaIE6, ne možete koristiti vrijednosti Fixed i Inherit - "magarac" jednostavno će ih ignorirati. Međutim, unatoč činjenici da je od sedme verzije situacija počela ispravljati, a fiksiranje je već obrađeno, svatko je dobio svoj omiljeni "preglednik za preuzimanje drugih preglednika" u nasljeđe samo u osmoj ulozi.

Ostatak promatrača mirno se nositi s pozicijom iz prvih verzija, s izuzetkom Opera, koji je stekao podršku za ovu nekretninu u svojim 4 varijacije, pušten sredinom 90-ih.

relativna pozicija je

Rad s pozicijom u Javascriptu

Zapravo priča o tome kako raditis imenom Pozicija u Javascriptu, uključili smo se samo radi pristojnosti. Budući da u ovom imenu nema posebnih znakova, možete upotrijebiti JS bez ikakvih izmjena, na primjer, da biste postavili položaj za pozicioniranje diva, trebali biste uključiti ovu liniju: div.style.position = 'relativno'.

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

Zašto pozicijski odnosi zaslužuju posebnu pozornost?

Dok je većina vrijednosti entitetaPoložaj, blago rečeno, "prskaju" okolne elemente, koristeći vrijednost "položaj stila: relativni", uvijek biste se trebali sjetiti cijele stranice kao cjeline jer njezina netočna upotreba može uvelike "uvrtati" cijeli sadržaj zaslona.

položaj relativno css
Osim toga, to samo omogućava ovaj entitetkako bi se fiksni dizajn pretvorio u prilagodljiv, jer njegova upotreba automatski utječe na cijeli sadržaj stranice. Zatim ćemo još imati vremena razmotriti primjere i pogreške u korištenju ove vrijednosti, a uvjerit ćete se u njezin opipljivi značaj u praksi.

Kada treba koristiti relativno pozicioniranje?

Osim izgleda običnih stranica HTML, PoložajRelativno se često koristi za stvaranje raznih zanimljivih efekata. Na primjer, ako želite da neki element "dođe" na stranicu ili, obrnuto, ići glatko izvan njegovih rubova, onda vam ovo svojstvo može pomoći da shvatite ovaj "trik".

Slične "trikove" provode se putem Javascripta,ili, ako težite progresivnom izgledu, kroz CSS3 svojstva koja vam omogućuju prilagodbu cikličke promjene vrijednosti varijable.

položaj relativno lijevo
Osim toga, u nekim je slučajevima moguće stvoriti"Hibridne" vrijednosti položaja relativne. Iako CSS ne dopušta da istovremeno postavite nešto poput pozicije: apsolutni rođak, ali pomoću nekih trikova, ipak možete postići taj efekt. Ovaj pristup može biti korisno u slučajevima kada morate stvoriti nešto poput složenog alata ili kontekstnog izbornika. S obzirom na primjere, svakako ćemo dati opis strukture takvog "hibrida".

Primjeri upotrebe relativnog pozicioniranja

Relativni položaj je prilično jednostavan, alifleksibilan alat koji vam omogućuje implementaciju mnogih zanimljivih efekata. Kako ne bismo gubili vrijeme i prostor na pisanju beskorisnih šifri predložaka, osigurat ćemo nekoliko verbalnih algoritama koji mogu ukrasiti vašu web stranicu ili njegove pojedinačne stranice.

Počnimo s retkom "izvući". Pretpostavimo da imate potrebu za elementom koji će "napustiti" zbog lijevog ruba zaslona i postupno se prebaciti na desnu stranu. Za provedbu takvog "mehanizma", položaj: relativno; lijevo: -100px, pri čemu -100 je približan broj piksela koji čine širinu bloka. Ovaj stil će vam omogućiti skrivanje bloka izvan ekrana postavljajući ga na "početnu poziciju". Sada možete upotrijebiti skriptu koja će povećati vrijednost lijeve nekretnine za svakih nekoliko millisekundi dok ne bude jednaka širini prozora preglednika umanjena širina elementa. Kao rezultat, dobivamo blok koji se pojavljuje s lijevog ruba, pomiče se po cijelom zaslonu i "parkira" na svojoj desnoj strani.

Drugi primjer omogućuje vam stvaranje"Relativno-apsolutni" elementi. Na primjer, možete upisati apsolutni dio drugog koji ima Relativni položaj. Kao rezultat toga, imamo "relativni" blok, koji nema veličinu, u kojem je upisano apsolutno, što se sada može manifestirati u položaju ovisno o elementima koji ga prethode.

Uobičajene pogreške pri upotrebi položaja relativno

div položaj relativno

Najčešća pogreška kadaUpotreba položaja relativno je da mnogi dizajneri izgleda zaboravljaju na mogućnost spremanja prostora za blok koji može biti bilo gdje. Na primjer, ako imate prilično veliko, postavljeno izvan zaslona i relativno pozicioniranje, na njegovo će se mjesto zamijeniti "rupa". Međutim, čak i to svojstvo, koje ponekad stvara određene neugodnosti, može se upotrijebiti za dobro, na primjer, stvaranjem zanimljivog učinka "self-assembling" web stranice, u kojoj su svi njezini blokovi postupno postavljeni na vrh: 0 položaj; lijevo: 0; tj. na njegovo izvornom mjestu.

Pročitajte više: