Položaj Relativna - 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 boste postali izkušen zbornik, vsak novinec preživi veliko časa študira različne navodila in specifikacije obeh jeziku HTML v in na zaveznika - CSS. O točno kaj CSS, kaj je in kaj "Funt ušesa" vam omogoča, da vstaneš, kot tudi eden od njegovih najboljših lastnosti - Položaj Relativna - danes bomo govorili.

Kaj je CSS?

CSS Kratica se lahko prepišejo in prevesti v ruščino kot "kaskadnih slogov". Sliši se precej čudno - na eni strani, se zdi jasno, in besede, in na drugi strani - splošni pomen ne takoj ujeli. Začnimo z preprosta - s stilom. Ta tehnologija omogoča pritrditev predmetov na strani, nekatere značilnosti v zvezi z videzom, ki ga lahko registrira samo enkrat in uporabi neskončno število krat.

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 kot je sedaj, da jih preizkusite.

Nazadnje se beseda "Cascade." Dejstvo je, da ima lahko vsak element več stilov, ki jih je mogoče mešati ali celo prekrivajo. 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.

Torej, zdaj, ko je vse, kar je iz imena jasno, si oglejmo preprost primer. Recimo, da vaše spletne strani bi moralo biti veliko število gumbov, ki so namenjeni na določen način. Imajo lastnosti, kot so velikost, sence, motnost, barva. Seveda, lahko določite te parametre, ki ustvarja vsak gumb, vendar je veliko lažje za uporabo 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 "sijaj".

Kaj nepremičnina položaj?

Zdaj gredo neposredno v objektu stališča, zaradi katerih se je začel ves ta članek. Če ste seznanjeni z angleškem jeziku, ali imajo dobro intuicijo, potem bi morali že biti jasno - ta lastnost je odgovoren za lokacijo predmeta. V resnici je tako, kot je, ampak določiti posebne lokacije, ta lastnost pove brskalnik, kako naj se postavi eden ali drug element glede na meji ali preko strani kot celote.

Katere vrednosti lahko nepremičnina položaj?

Naša lastnina lahko sprejme več različnih vrednosti, obstaja le pet. Tukaj je kratek opis vsakega:

• Položaj Podeduj. Ta funkcija vam omogoča kopiranje podatkov o položaju elementa, ki je eden od staršev. Na primer, če imate div z določeno položaju glede nato vstopil vanj z IMG podedovani vrednosti bo tudi določil, da relativna.
• Položaj Static. Ta vrednost se samodejno glede na vse elemente, razen če je navedeno več. Elementi se prilega v položaju, kot je navedeno v kodeksu in niso na voljo za različne "posladek", ki omogoča, da spremeni svoje stališče.
• Položaj Absolute. S to vrednostjo se nepremičnina Položaj zelo pogosto uporablja v primerih, ko je to potrebno, da ustvarite "plavajoči" element. Z določeno vrednost predmeta nepremičnin je "nevidna" za druge sestavne dele strani. To pomeni, da so urejene, kot da je naša absolutna element ne obstaja. Sam je vedno na mestu, ne glede na to, kako so daleč pomika stran.
• Položaj Fiksna. 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, postavite relativna. Ta vrsta vrednosti omogoča pozicioniranje elementa glede na drugi strani, ki so lahko koristni za ustvarjanje prilagodljiv CE imenovani v skupnem "gume". S to nepremičnino, bo postavka "pritisnite" drugo, ne da bi izgubili možnost, da spremeni svoj položaj na strani.

Delo s stališčem v različnih brskalnikih

Niso vsi brskalniki so prav tako združljivi. Medtem ko je večina alternativnih programov za brskanje po spletu, brez kakršnih koli zastojev zaznane vrednosti stališča popolnoma res, "kronično posebna» Internet Explorer meni, da je premoženje, odvisno od njegove 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 del opazovalcev mirno ročaj stališča s prvo različico, z izjemo Opere, ki je dobil podporo lastnosti v svojih 4 različice, objavljene v sredini 90. let.

Delo s stališčem v Javascript

V resnici je zgodba o tem, kako delati z lastnino položaja v Javascript, 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 = "relativno".

Kot lahko vidite, da je zelo preprost.

Zakaj položaj glede zasluži 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 ta hotel samo vam omogoča, da preprosto spremeniti stalno oblikovanje prilagodljiv, saj bo njegova aplikacija samodejno vplivajo na vse strani z vsebino. Potem imamo še vedno čas, da preuči primere in napake, ki uporabljajo to vrednost, in videli boste svoje oprijemljiv pomen v praksi.

Ko bi morali uporabiti relativni položaj?

Poleg konvencionalne postavitev strani HTML, Položaj Relativno pogosto uporablja za ustvarjanje različnih zanimivih učinkov. Na primer, če želite element "prišel" na strani ali pa, nasprotno, postopoma šel preko njenega ozemlja, je prav ta lastnost lahko pomaga izvajati ta "trik".

Te "triki" se izvajajo preko Javascript je, ali, če si prizadeva za postopno uvedbo, po lastnostih CSS3, ki vam omogočajo, da prilagodite ciklične spremembe vrednosti posamezne spremenljivke.

Poleg tega je v nekaterih primerih mogoče ustvariti vrednosti "hibridne" Pozicija relativna. CSS, čeprav ne hkrati omogoča, da nastavite nekaj podobnega položaja: absolutno relativno, vendar s pomočjo nekaj trikov, je še vedno mogoče doseči ta učinek. Ta pristop je lahko koristno v primerih, ko boste morali ustvariti nekaj kompleks, kot je namig ali pop-up menija. Glede na primere, bomo dali opis strukture takšen "hibrid".

Primeri uporabe relativno uvrstitev

Položaj Relativna - to je zelo preprosta, vendar prilagodljivo orodje, ki vam omogoča, da izvajajo različne zanimive učinke. Da ne bi zapravljali čas in kraj, da napišete neuporabna kodo predloge, bomo predstavili nekaj ustne algoritmov, ki lahko okrasite vaše spletne strani ali posebne strani.

Začnimo z "zmanjkalo" linijo. Recimo, da imate potrebo po elementa, ki bo "potovanje", ker na levem robu zaslona in počasi premikajo na desni strani. Za izvajanje takšnega "mehanizem", je treba nastaviti položaj: relativna; levo: -100px, kjer -100 - približno število pikslov, ki sestavljajo širina bloka. Ta slog vam bo omogočilo, da se skriti enote izven zaslona, da ga postavite v "začetni položaj". Sedaj lahko uporabite skript, ki bo povečala vsakih nekaj milisekund levo lastnine vrednosti na enoto, dokler ne postane enaka širini okna brskalnika minus širini elementa. Rezultat je enota, ki prihaja iz levega roba, valjane po zaslonu in "parkirano" na desnici.

Drug primer omogoča, da ustvarite "relativne-absolutne" elemente. Na primer, lahko vnesete absolutno znotraj drugega, ki ima položaj glede. Kot rezultat, imamo "relativno" blok, ki nima velikosti, za katere je absolutna napisano, je zdaj lahko manifestira v položaju, ki je neodvisen od prejšnjega elementa.

Tipične napake pri uporabi položaju glede

Najpogostejša napaka pri uporabi relativnega položaja je, da veliko spletnih oblikovalcev pozabi sposobnost pridrži mesto v enoti, ki se lahko nahajajo kjerkoli. Na primer, če imate precej velik, ki se nahaja izven zaslona in ima relativno pozicioniranje, na njenem mestu bo zevajoč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 dani v zgornjem položaju: 0; levo: 0; t. e. njegov prvotni lokaciji.