Stališče Relativno - kaj je to? Podroben opis

Gnezdenje HTML - dolgotrajen proces, strog, a zelo kreativno. Kljub temu, da za večino ljudi, ki delajo v IT, lahko spletne strani postavitev zdi dolgočasno rutino, strokovnjaki, ki imajo poklic za tem primeru, ne le kakovostno izvedbo naloge, ampak tudi prejemajo iz procesa oprijemljivega užitek.

Vendar, preden postane izkušen spletni oblikovalec, vsak novec porabi veliko časa za učenje različnih navodil in specifikacij za jezik HTML in njegov zavezniško CSS. Gre za to, kaj je CSS, za to, kar je potrebno in kaj "feints with uši" vam omogoča, da vstanete, in tudi o eni od njegovih priljubljenih lastnosti - Position Relative - danes bomo govorili.

Kaj je CSS?

Okrajšavo CSS se lahko razširi in prevede v ruski kot "kaskadni listi slogov". Sliši se precej čudno - po eni strani, tako kot besede in razumljivo, toda na drugi strani - splošni pomen ni ulovljen takoj. Začnimo s preprostim - s slogi. Ta tehnologija vam omogoča, da na strani postavite predmete določene značilnosti, ki se nanašajo na videz, ki se lahko predpiše le enkrat, vendar se uporablja neomejeno številokrat.

Beseda "miza" v uradnem prevodu pojavila skoraj po naključju - v resnici bolj ustrezen tukaj bi bilo uporabiti besedo "sezname" ali "seznama", pa so avtorji prvotnega prevoda odločil, da CSS izgleda več kot seznam, in kdo smo tako da jih zdaj sodi.

Nazadnje, beseda "kaskada". Dejstvo je, da ima vsak element lahko več stilov hkrati, kar je mogoče mešati ali celo preseči. V takih primerih je brskalnik mora za to vrsto pravil, da se pišejo videz bloka, katerega se je izkazalo, da je več stilov, z enim od njih, na primer, ima položaj glede premoženja in drugi - Pozicija Absolute. Dejstvo je, taka nasprotja ne more dopustiti, vendar v velikih projektih, kot zmeda dogaja zelo pogosto.

Zdaj, ko je ime jasno, poglejmo na en preprost primer. Recimo, da imate na svojem spletnem mestu veliko število gumbov, ki so na določen način okrašeni. Imajo take lastnosti kot velikost, senca, prosojnost, barva. Seveda lahko določite te parametre in ustvarite vsak gumb, vendar bo veliko lažje uporabljati CSS. V praksi, morate opisati določen razred, ki navaja vrednosti vseh zgoraj navedenih lastnosti, nato pa namesto dolgega seznama, bo oznaka za vsak gumb je treba samo navesti ime razreda, potem bo brskalnik sama barvanje teh elementov v želeno barvo in jim dati ustrezno "Gloss".

Zakaj potrebujem lastnost Position?

Zdaj se premaknemo neposredno v lastnost Position, za katero je bil celoten članek zasnovan. Če poznate angleščino ali imate dobro intuicijo, potem morate že razumeti - ta lastnost je odgovorna za lokacijo elementa. Dejansko je res, vendar namesto določanja določenega kraja ta lastnost govori brskalniku, kako natančno postaviti postavko glede na sosednjo ali celotno stran kot celoto.

Katere vrednosti lahko sprejme lastnost Position?

Naša lastnina lahko sprejme več različnih vrednosti, le pet jih je. Tukaj je kratek opis vsake od njih:

• Ujemanje položaja. Ta lastnost vam omogoča kopiranje podatkov o položaju elementa, ki je nadrejeni. Na primer, če imate div z določenim položajem Relative, bo vpisani IMG z dedno vrednostjo dobil tudi vrednost Relative.
• Položaj statično. Ta vrednost se samodejno dodeli vsem elementom, razen če ni drugače določeno. Elementi so v položaju, kot so navedeni v kodi in niso na voljo za različne "dobrote", ki jim omogočajo spremembo položaja.
• Položaj Absolutni. Ta vrednost lastnosti Position se pogosto uporablja v primerih, ko je potrebno ustvariti "plavajoči" element. Ta vrednost lastnosti ostane element »neviden« za preostanek strani. To pomeni, da se nahajajo, kot da naš absolutni element sploh ne obstaja. On sam bo vedno ostal na mestu, ne glede na to, kako daleč je bila stran premaknjena.
• Položaj je pritrjen. V mnogih pogledih, ta vrednost je podobna prejšnji, vendar pa je absolutno element vezan na matično, določen uporabe le koordinate v zgornjem levem kotu zaslona brskalnika, ignorirajo ostale elemente, ki jih pred tem.
• Končno, položaj relativno. Ta vrsta vrednosti vam omogoča, da postavite element v razmerju do drugih, kar je lahko koristno pri ustvarjanju prilagoditvene oznake, ki se imenuje "guma" pri navadnih ljudeh. Če ima ta lastnost, element "premakne" preostanek, ne da bi pri tem izgubil možnost spreminjanja svoje lokacije na strani.

Značilnosti dela s položajem v različnih brskalnikih

Vsi brskalniki niso enako združljivi. Medtem ko večina alternativnih programov za brskanje po internetu brez kakršne koli nakazovanja zaznava vrednost položaja, je resnično res, "kronično poseben" Internet Explorer meni, da je ta lastnost odvisna od njene različice.

Na primer, s pomočjo že "pokopali" brskalnik IE6, ne morete uporabiti vrednosti, določene in dedovanja - "osla", ki jih je preprosto prezreti. Vendar pa kljub temu, da je sedma različica položaja začel izboljševati, in fiksno že obdelali, Inherit ljubljeno "brskalnik za prenos drugih brskalnikov," je dosegel šele v osmem inkarnaciji.

Preostali pregledovalci tiho obdelajo Položaj iz prvih različic, z izjemo Opera, ki je pridobila podporo za to lastnost v svoji 4. različici, ki se je izdala sredi devetdesetih let prejšnjega stoletja.

Delo s položajem v jаvascriptu

V resnici je zgodba o tem, kako delati z lastnino položaja v jаvascript, smo vključili le zavoljo spodobnosti. Ker ta lastnost nima nobenih posebnih znakov v naslovu, lahko uporabite JS brez sprememb, na primer, da nastavite div stališča Relativna mora vsebovati vrstico, kot je ta: div.style.position = lsquo-relativersquo-.

Kot lahko vidite, je vse precej preprosto.

Zakaj je položaj Relative zaslužiti posebno pozornost?

Medtem ko je večina vrednosti nepremičnin stališča, milo rečeno, "pljunil" na okoliških elementov, s pomočjo vrednosti "položaj slog: sorodnik", bi morali vedno zavedati o celotni strani kot celoto, saj nepravilno uporabo zelo lahko "nagiba" celotno vsebino zaslona .

Poleg tega samo ta lastnost omogoča enostavno pretvorbo fiksne oblike v prilagodljiv, ker njegova aplikacija samodejno vpliva na celotno vsebino strani. Nato še vedno imamo čas, da razmislimo o primerih in napakah pri uporabi te vrednosti, v praksi pa boste videli njegovo opredmeteno vrednost.

Kdaj naj uporabljam relativno pozicioniranje?

Poleg postavitve običajnih HTML strani se položaj Relativ pogosto uporablja za ustvarjanje različnih zanimivih učinkov. Na primer, če želite, da element pride "na stran" ali, nasprotno, gladko gre za robove, lahko ta lastnost pomaga pri izvajanju tega "feinta".

Podobni »triki« se izvajajo prek jаvascripta ali, če si prizadevate za progresivno postavitev, prek lastnosti CSS3, ki vam omogočajo, da konfigurirate ciklično spremembo vrednosti spremenljivke.

Poleg tega je v nekaterih primerih mogoče ustvariti "hibridne" položaje relativne vrednosti. CSS, čeprav vam ne omogoča istočasnega nastavljanja nečesa podobnega položaja: absolutnega sorodnika, vendar z uporabo nekaterih trikov, lahko še vedno dosežete ta učinek. Ta pristop je lahko uporaben v tistih primerih, ko je treba ustvariti nekaj podobnega zapletenega orodje ali kontekstnega menija. Glede na primere bomo zagotovo opisali strukturo takega "hibrida".

Primeri uporabe relativnega pozicioniranja

Stališče Relative je precej preprosto, vendar prilagodljivo orodje, ki vam omogoča izvajanje številnih zanimivih učinkov. Da ne boste izgubljali časa in prostora pri pisanju nekoristnih šablonov predlog, vam bomo dali nekaj verbalnih algoritmov, ki lahko okrasijo vašo spletno stran ali njegove posamezne strani.

Začnimo s črko »teči«. Recimo, da potrebujete element, ki bo "potoval" iz levega roba zaslona in postopoma premaknili na svojo desno stran. Če želite uporabiti ta "mehanizem", morate nastaviti položaj: relativno-levo: -100 slikovnih pik, pri čemer -100 je približno število pikslov, ki sestavljajo širino bloka. Ta slog vam omogoča, da skrijete blok zunaj zaslona in ga nastavite na "začetni položaj". Zdaj lahko uporabite skript, ki poveča vrednost leve lastnosti vsakih nekaj milisekund, dokler ne postane enako širini okna brskalnika minus širini elementa. Kot rezultat, dobimo blok, ki se pojavi iz levega roba, valjan skozi celoten zaslon in "parkiran" na desni strani.

Drug primer vam omogoča ustvarjanje "sorazmerno absolutnih" elementov. Na primer, lahko vnesete absolutno v drugo, ki ima položaj Relativno. Posledično imamo "relativni" blok, ki nima velikosti, v katero je vpisan absolutni, ki se lahko manifestira v položaju, ki je odvisen od elementov, ki so pred njim.

Pogoste napake pri uporabi relativnega položaja

Najpogostejša napaka pri uporabi relativnega položaja je, da mnogi oblikovalci postavitev pozabijo na možnost rezerviranja prostora za blok, ki je lahko kjerkoli. Na primer, če imate precej veliko, ki je nameščeno izven zaslona in ima relativno pozicioniranje, se na njej prikaže "luknja". Vendar pa je tudi ta lastnost včasih povzroča določene nevšečnosti, se lahko uporabi za dobro, na primer, ustvarja zanimiv učinek "self-montaža" na mestu, kjer so vsi njeni blokov postopoma postavi v položaj top: 0- levi: .. 0- tj svojo prvotno mesto.