Umístěte Relativní - co to je? detailní popis

Hnízdění HTML - zdlouhavý proces, přísné, ale velmi kreativní. Navzdory tomu, že pro většinu lidí zaměstnaných v oblasti IT, rozložení webové stránky se může zdát nudné rutiny, specialisté, kteří mají povolání pro takový případ, a to nejen kvalitativně plnit úkol, ale také přijímat od procesu hmatatelné potěšení.

Nicméně předtím, než se stanete zkušený kodér, každý nováček tráví spoustu času studovat různé pokyny a specifikace jak v jazyce HTML a na jeho spojence - CSS. O přesně to, co CSS, co to je a co „finta uši“, který vám umožní dostat nahoru, stejně jako jednu ze svých nejvyšších vlastností - poloha Relativní - dnes budeme mluvit.

Co je to CSS?

CSS Zkratka může být přepsán a přeložena do ruštiny jako „kaskádových stylů“. Zní to dost divné - na jedné straně se zdá být jasné, a slova, a na druhé straně - obecný význam není okamžitě zachycen. Začněme s jednoduchou - ve velkém stylu. Tato technologie umožňuje připojit objekty na stránce, určité vlastnosti, pokud jde o vzhled, který si můžete zaregistrovat pouze jednou a používat neomezený počet krát.

v úředním překladu slovo „table“ se objevil téměř náhodou - vlastně vhodnější zde by bylo použít slovo „seznamy“ nebo „listy“, nicméně autoři původního překladu rozhodl, že CSS vypadá víc než jen seznam, a kdo jsme takový je nyní vyzkoušet.

Konečně slovo „Cascade“. Faktem je, že každý prvek může mít několik stylů, které mohou být smíchány, nebo dokonce překrývají. V takových případech má prohlížeč uchýlit k souboru pravidel, aby se skládat vzhled bloku, což se ukázalo být několik stylů, s jedním z nich, například, je poloha vzhledem majetek, a druhá - absolutní polohy. Ve skutečnosti tyto konflikty nemohou být tolerovány, ale u velkých projektů, jako zmatek se stává poměrně často.

Takže teď, když je všechno z názvu zřejmé, podívejme na jednoduchý příklad. Řekněme, že vaše stránky by měly být velké množství tlačítek, která by v určitém smyslu. Mají vlastnosti, jako je velikost, stínu, neprůhlednosti, barva. Samozřejmě, můžete zadat tyto parametry, vytvářet jednotlivá tlačítka, ale je mnohem jednodušší použít CSS. V praxi je třeba popsat určitou třídu, kde jsou uvedeny hodnoty všech výše uvedených vlastností, a potom, namísto dlouhého seznamu, bude značka každého tlačítka stačí pouze zadat název třídy, pak prohlížeč sám vybarví tyto prvky v požadované barvě a dát jim řádné „lesk“.

Co je vlastnost pozice?

Nyní přejít přímo k postoji majetku, kvůli které bylo začal celý tento článek. Pokud jste obeznámeni s anglickým jazykem, ale také se dobře intuici, pak byste měli již být jasné - tato vlastnost je zodpovědný za umístění položky. Ve skutečnosti, jak to je, ale místo toho určit konkrétní místo, je tato vlastnost říká prohlížeči, jak by měl být umístěn jeden nebo jiný prvek s ohledem na sousedící nebo celé stránky jako celku.

Co může vlastnost Pozice hodnoty?

Naše nemovitosti je možné provést mnoho různých hodnot, existuje pouze pět. Zde je stručný popis každého:

• Pozice Dědit. Tato funkce umožňuje kopírovat údaje o poloze prvku, který je rodičem. Například, pokud máte div se specifickou pozici vzhledem, pak vstoupil do něj s IMG převezmou hodnota bude také nastavena na relativní.
• Umístěte Static. Tato hodnota je dána pro všechny prvky automaticky, není-li uvedeno nic víc. Prvky zapadají do polohy, jak je uvedeno v kódu a nejsou k dispozici pro celou řadu „ozdůbky“, který umožňuje měnit svou polohu.
• Poloha Absolutní. Touto hodnotou je vlastnost pozice je často používán v případech, kdy je nutné vytvořit „plovoucí“ prvek. S danou hodnotu položky majetku je „neviditelný“ pro ostatní komponenty stránky. To znamená, že jsou uspořádány jakoby neexistuje naše absolutní element. On sám bude vždy na svém místě, bez ohledu na to, do jaké míry byl posunut stránku.
• Pozice Pevné. V mnoha směrech je tato hodnota je podobná té předchozí, ale zároveň absolutní prvek je vázán k mateřské společnosti, fixní používá pouze souřadnicemi levého horního rohu obrazovky prohlížeče ignoruje zbytek prvků, které jí předcházely.
• A konečně, poloha vzhledem. Tento typ hodnoty umožňuje umístění prvku vzhledem k druhé, což může být užitečné pro vytvoření adaptivní označení nazývá v běžném „gumy“. Díky této vlastnosti je položka „push“ druhý, aniž by ztratily schopnost měnit svou pozici na stránce.

Práce s Pozice v různých prohlížečích

Ne všechny prohlížeče jsou stejně kompatibilní. Zatímco většina alternativních programů pro surfování na internetu bez jakýchkoliv závěsy vnímané hodnoty postoje je naprostá pravda, „chronicky speciální» Internet Explorer považuje majetek, v závislosti na jeho verzi.

Například při použití již „pohřben“ prohlížeče IE6, nelze použít hodnotu fixních a Zdědit - „osla“, oni to prostě ignorovat. Nicméně, navzdory skutečnosti, že sedmá verze se situace začala zlepšovat, a upevňují již zpracovány, aby Zdědit milovaný „prohlížeč ke stažení jiných prohlížečů,“ dosáhl až ve své osmé inkarnaci.

Zbytek pozorovatelů klidně zvládnout pozici s první verzí, s výjimkou opery, která má podporu vlastností ve svých 4 variantách, publikoval v polovině 90. let.

Práce s Pozice v JavaScriptu

Ve skutečnosti, příběh o tom, jak pracovat s majetkem Pozice v Javascript je, jsme zahrnuli pouze v zájmu slušnosti. Vzhledem k tomu, tato vlastnost nemá žádné speciální znaky v názvu, můžete použít JS bez jakýchkoli změn, například nastavit div poloha vzhledem, by měla obsahovat řadu takto: div.style.position = ‚relativní‘.

Jak vidíte, je to docela jednoduché.

Proč poloha vzhledem zasluhuje zvláštní pozornost?

Zatímco většina z hodnot vlastností postoje, mírně řečeno, „odplivl“ na okolní prvky, pomocí hodnoty „pozice ve stylu: relativní“, by měl vždy pamatovat na celou stránku jako celek, protože nesprávné používání může silně „překroutit“ celý obsah obrazovky ,

Navíc toto zařízení pouze umožňuje snadno převést pevné konstrukce adaptivní, protože její aplikace automaticky ovlivní všechny stránky s obsahem. Pak máme ještě čas na posouzení příklady a chyby pomocí tuto hodnotu, a uvidíte její hmatatelný význam v praxi.

Kdy byste měli používat relativní umístění?

Kromě běžného rozložení HTML stránek, poloha vzhledem často používá k vytvoření různých zajímavých efektů. Například, chcete-li položku „přišel“ na stránce, nebo naopak postupně přesahoval jeho území, je to právě tato vlastnost vám pomohou realizovat tento „trik“.

Tyto „triky“ jsou realizovány prostřednictvím JavaScript, nebo, pokud se budete snažit pro postupné zavedení, prostřednictvím vlastností CSS3, které vám umožní nastavit cyklické změny hodnoty určité proměnné.

Navíc v některých případech možné vytvořit „hybridní“ hodnoty poloha vzhledem. CSS, i když ne v současně umožňuje nastavit něco jako pozice: absolutní vzhledem, ale pomocí pár triků, to je ještě možné k dosažení tohoto efektu. Tento přístup může být užitečný v případech, kdy je třeba vytvořit něco komplex jako popisku nebo pop-up menu. S ohledem na příklady, dáme popis struktury takové „hybridní“.

Příklady použití relativní pořadí

Poloha vzhledem - je to docela jednoduché, ale flexibilní nástroj, který vám umožní provádět celou řadu zajímavých efektů. Aby nedošlo k plýtvání času a místa psát zbytečný šablony kódu, představujeme několik ústních algoritmy, které můžete vyzdobit váš web nebo konkrétní stránky.

Začněme s „run out“ řádek. Předpokládejme, že máte potřebu prvku, který bude „cestování“, protože na levém okraji obrazovky a pomalu ji přesunout na pravou stranu. Implementovat takový „mechanismus“, by měla stanovit pozice: relativní; vlevo: -100px, kde -100 - přibližný počet obrazových bodů, které tvoří šířku bloku. Tento styl vám umožní skrýt jednotku ven z obrazovky, umístit jej do „výchozí pozice“. Nyní můžete použít skript, který zvýší každých několik milisekund zůstaly hodnoty nemovitosti na jednotku tak dlouho, dokud se nestane rovnající se šířce okna prohlížeče minus šířky prvku. Výsledkem je jednotka, která vychází z levého okraje, válcované přes obrazovku a „zaparkoval“ v pravé ruce.

Dalším příkladem vám umožní vytvořit „relativního absolutní“ prvky. Například můžete zadat absolutní uvnitř druhého, který má poloha vzhledem. V důsledku toho máme „relativní“ blok, který nemá velikost, na kterou je absolutní je napsáno, je nyní schopna projevit v poloze nezávisle na předchozí prvek.

Typické chyby při použití poloha vzhledem

Nejčastější chybou při používání i vzájemná poloha je, že mnozí webdesignéři zapomenout možnost rezervovat si místo v jednotce, která může být umístěna kdekoliv. Například, pokud máte poměrně velký, které mimo obrazovku a má relativní polohy, na jeho místo bude zející „díra“. Nicméně, i tato vlastnost je někdy vytváří určité obtíže mohou být použity k dobrému, například, vytvářet zajímavý efekt „samouspořádavací“ v místě, kde všechny jeho bloků jsou postupně umístěny v horní poloze: 0; vlevo: 0; t. j. jeho původní místo.