Umiestnite Relatívna - čo to je? detailný popis

Hniezdenie HTML - zdĺhavý proces, prísne, ale veľmi kreatívne. Napriek tomu, že pre väčšinu ľudí zamestnaných v oblasti IT, rozloženie webovej stránky sa môže zdať nudné rutiny, špecialisti, ktorí majú povolanie pre takýto prípad, a to nielen kvalitatívne plniť úlohu, ale tiež prijímať od procesu hmatateľné potešenie.

Avšak predtým, než sa stanete skúsený kodér, každý nováčik trávia veľa času študovať rôzne pokyny a špecifikácie ako v jazyku HTML a na jeho spojencov - CSS. O presne to, čo CSS, čo to je a čo "finta uši", ktorý vám umožní dostať hore, rovnako ako jednu zo svojich najvyšších vlastností - poloha Relatívna - dnes budeme hovoriť.

Čo je to CSS?

CSS Skratka môže byť prepísaný a preložená do ruštiny ako "kaskádových štýlov". Znie to dosť divné - na jednej strane sa zdá byť jasné, a slová, a na druhej strane - všeobecný význam nie je okamžite zachytený. Začnime s jednoduchou - vo veľkom štýle. Táto technológia umožňuje pripojiť objekty na stránke, určité vlastnosti, pokiaľ ide o vzhľad, ktorý si môžete zaregistrovať iba raz a používať neobmedzený počet krát.

v úradnom preklade slovo "table" sa objavil takmer náhodou - vlastne vhodnejšie tu by bolo použiť slovo "zoznamy" alebo "listy", však autori pôvodného prekladu rozhodol, že CSS vyzerá viac než len zoznam, a kto sme taký je teraz vyskúšať.

Konečne slovo "Cascade". Faktom je, že každý prvok môže mať niekoľko štýlov, ktoré môžu byť zmiešané, alebo dokonca prekrývajú. V takýchto prípadoch má prehliadač uchýliť k súboru pravidiel, aby sa skladať vzhľad bloku, čo sa ukázalo byť niekoľko štýlov, s jedným z nich, napríklad, je poloha vzhľadom majetok, a druhá - absolútna polohy. V skutočnosti tieto konflikty nemôžu byť tolerované, ale u veľkých projektov, ako zmätok sa stáva pomerne často.

Takže teraz, keď je všetko z názvu zrejmé, pozrime na jednoduchý príklad. Povedzme, že vaše stránky by mali byť veľké množstvo tlačidiel, ktorá by v určitom zmysle. Majú vlastnosti, ako je veľkosť, tieňa, netransparentnosti, farba. Samozrejme, môžete zadať tieto parametre, vytvárať jednotlivé tlačidlá, ale je oveľa jednoduchšie použiť CSS. V praxi je potrebné popísať určitú triedu, kde sú uvedené hodnoty všetkých vyššie uvedených vlastností, a potom, namiesto dlhého zoznamu, bude značka každého tlačidla stačí len zadať názov triedy, potom prehliadač sám vyfarbia tieto prvky v požadovanej farbe a dať im riadne "lesk".

Čo je vlastnosť pozície?

Teraz prejsť priamo k postoju majetku, kvôli ktorej bolo začal celý tento článok. Ak ste oboznámení s anglickým jazykom, ale tiež sa dobre intuíciu, potom by ste mali už byť jasné - táto vlastnosť je zodpovedný za umiestnenie položky. V skutočnosti, ako to je, ale namiesto toho určiť konkrétne miesto, je táto vlastnosť hovorí prehliadači, ako by mal byť umiestnený jeden alebo iný prvok s ohľadom na susediace alebo celé stránky ako celku.

Čo môže vlastnosť Pozícia hodnoty?

Naša nehnuteľnosti je možné vykonať veľa rôznych hodnôt, existuje iba päť. Tu je stručný opis každého:

• Pozícia Dediť. Táto funkcia umožňuje kopírovať údaje o polohe prvku, ktorý je rodičom. Napríklad, ak máte div sa špecifickou pozíciu vzhľadom, potom vstúpil do neho s IMG prevezmú hodnota bude tiež nastavená na relatívne.
• Umiestnite Static. Táto hodnota je daná pre všetky prvky automaticky, ak nie je uvedené nič viac. Prvky zapadajú do polohy, ako je uvedené v kóde a nie sú k dispozícii pre celý rad "ozdôbky", ktorý umožňuje meniť svoju polohu.
• Poloha Absolútna. Touto hodnotou je vlastnosť pozícia je často používaný v prípadoch, keď je nutné vytvoriť "plávajúca" prvok. S danú hodnotu položky majetku je "neviditeľný" pre ostatné komponenty stránky. To znamená, že sú usporiadané akoby neexistuje naše absolútny element. On sám bude vždy na svojom mieste, bez ohľadu na to, do akej miery bol posunutý stránku.
• Pozícia Pevné. V mnohých smeroch je táto hodnota je podobná tej predchádzajúcej, ale zároveň absolútna prvok je viazaný k materskej spoločnosti, fixné používa iba súradnicami ľavého horného rohu obrazovky prehliadača ignoruje zvyšok prvkov, ktoré jej predchádzali.
• A konečne, poloha vzhľadom. Tento typ hodnoty umožňuje umiestnenie prvku vzhľadom k druhej, čo môže byť užitočné pre vytvorenie adaptívne označenie nazýva v bežnom "gumy". Vďaka tejto vlastnosti je položka "push" druhý, bez toho, aby stratili schopnosť meniť svoju pozíciu na stránke.

Práca s Pozícia v rôznych prehliadačoch

Nie všetky prehliadače sú rovnako kompatibilné. Zatiaľ čo väčšina alternatívnych programov pre surfovanie na internete bez akýchkoľvek závesy vnímanej hodnoty pozície je úplná pravda, "chronicky špeciálna» Internet Explorer považuje majetok, v závislosti na jeho verzii.

Napríklad pri použití už "pochovaný" prehliadača IE6, nemožno použiť hodnotu fixných a Dediť - "osla", oni to jednoducho ignorovať. Avšak, napriek skutočnosti, že siedma verzia sa situácia začala zlepšovať, a upevňujú už spracované, aby Dediť milovaný "prehliadač k stiahnutiu iných prehliadačov," dosiahol až vo svojej ôsmej inkarnácii.

Zvyšok pozorovateľov pokojne zvládnuť pozíciu s prvou verziou, s výnimkou opery, ktorá má podporu vlastností vo svojich 4 variantoch, publikoval v polovici 90. rokov.

Práca s Pozícia v JavaScripte

V skutočnosti, príbeh o tom, ako pracovať s majetkom Pozícia v Javascript je, sme zahrnuli iba v záujme slušnosti. Vzhľadom k tomu, táto vlastnosť nemá žiadne špeciálne znaky v názve, môžete použiť JS bez akýchkoľvek zmien, napríklad nastaviť div poloha vzhľadom, by mala obsahovať rad takto: div.style.position =, relatívna '.

Ako vidíte, je to celkom jednoduché.

Prečo poloha vzhľadom zasluhuje osobitnú pozornosť?

Zatiaľ čo väčšina z hodnôt vlastností postoja, mierne povedané, "odpľul" na okolité prvky, pomocou hodnoty "pozície v štýle: relatívna", by mal vždy pamätať na celú stranu ako celok, pretože nesprávne používanie môže silne "prekrútiť" celý obsah obrazovky ,

Navyše toto zariadenie iba umožňuje ľahko previesť pevnej konštrukcie adaptívne, pretože jej aplikácia automaticky ovplyvní všetky stránky s obsahom. Potom máme ešte čas na posúdenie príklady a chyby pomocou túto hodnotu, a uvidíte jej hmatateľný význam v praxi.

Kedy by ste mali používať relatívna umiestnenie?

Okrem bežného rozloženia HTML stránok, poloha vzhľadom často používa na vytvorenie rôznych zaujímavých efektov. Napríklad, ak chcete položku "prišiel" na stránke, alebo naopak postupne presahoval jeho území, je to práve táto vlastnosť vám pomôžu realizovať tento "trik".

Tieto "triky" sú realizované prostredníctvom JavaScript, alebo, ak sa budete snažiť pre postupné zavedenie, prostredníctvom vlastností CSS3, ktoré vám umožní nastaviť cyklické zmeny hodnoty určitej premennej.

Navyše v niektorých prípadoch možné vytvoriť "hybridný" hodnoty poloha vzhľadom. CSS, aj keď nie v súčasne umožňuje nastaviť niečo ako pozície: absolútna vzhľadom, ale pomocou pár trikov, to je ešte možné na dosiahnutie tohto efektu. Tento prístup môže byť užitočný v prípadoch, keď je potrebné vytvoriť niečo komplex ako popisku alebo pop-up menu. S ohľadom na príklady, dáme popis štruktúry také "hybridný".

Príklady použitia relatívna poradí

Poloha vzhľadom - je to celkom jednoduché, ale flexibilný nástroj, ktorý vám umožní vykonávať celý rad zaujímavých efektov. Aby nedošlo k plytvaniu času a miesta písať zbytočný šablóny kódu, predstavujeme niekoľko ústnych algoritmy, ktoré môžete vyzdobiť váš web alebo konkrétne stránky.

Začnime s "run out" riadok. Predpokladajme, že máte potrebu prvku, ktorý bude "cestovanie", pretože na ľavom okraji obrazovky a pomaly ju presunúť na pravú stranu. Implementovať taký "mechanizmus", by mala stanoviť pozícia: relatívny; vľavo: -100px, kde -100 - približný počet obrazových bodov, ktoré tvoria šírku bloku. Tento štýl vám umožní skryť jednotku von z obrazovky, umiestniť ho do "východiskovej pozície". Teraz môžete použiť skript, ktorý zvýši každých niekoľko milisekúnd zostali hodnoty nehnuteľnosti na jednotku tak dlho, kým sa nestane rovnajúcu sa šírke okna prehliadača mínus šírky prvku. Výsledkom je jednotka, ktorá vychádza z ľavého okraja, valcované cez obrazovku a "zaparkoval" v pravej ruke.

Ďalším príkladom vám umožní vytvoriť "relatívneho absolútnu" prvky. Napríklad môžete zadať absolútnu vnútri druhého, ktorý má poloha vzhľadom. V dôsledku toho máme "relatívnej" blok, ktorý nemá veľkosť, na ktorú je absolútna je napísané, je teraz schopná prejaviť v polohe nezávisle na predchádzajúci prvok.

Typické chyby pri použití poloha vzhľadom

Najčastejšou chybou pri používaní aj vzájomná poloha je, že mnohí webdesignéri zabudnúť možnosť rezervovať si miesto v jednotke, ktorá môže byť umiestnená kdekoľvek. Napríklad, ak máte pomerne veľký, ktoré mimo obrazovku a má relatívnu polohy, na jeho miesto bude zející "diera". Avšak, aj táto vlastnosť je niekedy vytvára určité ťažkosti môžu byť použité k dobrému, napríklad, vytvárať zaujímavý efekt "samouspořádavací" v mieste, kde všetky jeho blokov sú postupne umiestnené v hornej polohe: 0; vľavo: 0; t. j. jeho pôvodné miesto.