Relativní pozice - co to je? Podrobný popis

Rozložení HTML je dlouhý proces, důkladný, 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 stane zkušený webový designér, každý nováček stráví spoustu času učit se různým instrukcím a specifikací jak pro jazyk HTML, tak pro jeho spojence CSS. Je to o tom, co je CSS, pro to, co je zapotřebí a co "fekány s ušima" vám dovolí vstát, a také o jednom z jeho oblíbených vlastností - pozici Relativní - dnes budeme mluvit.

Co je to CSS?

Zkratka CSS může být dešifrována a přeložena do ruštiny jako "kaskádové styly". Zní to docela zvláštní - na jedné straně, stejně jako slova a srozumitelná, ale na druhé straně - obecný význam není chycen najednou. Začněme jednoduchým stylem. Tato technologie vám umožňuje dát na stránce určité vlastnosti týkající se vzhledu, které lze předepsat pouze jednou, ale používaly nekonečně mnohokrá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 tak, že jsou nyní soudováni.

Nakonec slovo "kaskáda". Faktem je, že každý prvek může mít několik stylů najednou, které mohou být smíchány nebo dokonce protínají. 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 takové konflikty nelze tolerovat, ale ve velkých projektech dochází k takovému zmatku poměrně často.

Takže, když je název jasný, podívejme se na jeden jednoduchý příklad. Řekněme, že na vašem webu máte velké množství tlačítek, které jsou určitým způsobem ozdobeny. Mají takové vlastnosti jako velikost, stín, průhlednost, barva. Samozřejmě můžete zadat tyto parametry, vytvářet každé tlačítko, ale bude mnohem jednodušší používat 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".

Proč potřebuji vlastnost Pozice?

Nyní se přesuneme přímo na pozici Vlastnost, pro kterou byl celý článek koncipován. Pokud jste obeznámeni s angličtinou nebo máte dobrou intuici, měli byste již pochopit - tato vlastnost odpovídá za umístění prvku. Ve skutečnosti je to pravda, ale místo definování určitého místa tato vlastnost říká prohlížeči, jak přesně umístit položku relativně na sousední nebo celou stránku jako celek.

Jaké hodnoty může mít vlastnost Pozice?

Naše vlastnictví může mít několik různých hodnot, existuje jen pět z nich. Zde je stručný popis každého z nich:

• Pozice Dědictví. Tato vlastnost umožňuje kopírovat údaje o poloze položky, která je nadřazená. Například pokud máte div s uvedenou relativní pozicí, zapsaná IMG s dědičnou hodnotou získá relativní hodnotu.
• Poloha Statická. Tato hodnota je automaticky dána všem prvkům, pokud není uvedeno jinak. Prvky zapadají do polohy, jak jsou uvedeny v kódu, a nejsou k dispozici pro různé "lahůdky", které jim umožňují změnit svou polohu.
• Poloha absolutní. Tato hodnota vlastnosti Position se často používá v případech, kdy je nutné vytvořit "plovoucí" prvek. Hodnota této vlastnosti zůstává pro zbytek stránky "neviditelná". To znamená, že se nacházejí, jako by náš absolutní prvek vůbec neexistoval. On sám zůstane na svém místě, bez ohledu na to, jak daleko byla stránka posouvána.
• Pozice je 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.
• Konečně relativní pozice. Tento typ hodnoty umožňuje umístit prvek relativně k ostatním, což může být užitečné při vytváření adaptivní značky označované jako "gumové" u běžných lidí. S touto vlastností se prvek "zbaví" ostatních, aniž by ztratil možnost změnit polohu na stránce.

Funkce práce s pozicí 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éhokoliv vracení vnímá hodnotu Pozice je naprosto pravdivá, "Chronically Special" Internet Explorer považuje tuto vlastnost v závislosti na její verzi.

Např. Pomocí již pohřbeného prohlížeče IE6 nelze použít hodnoty Pevná a dědičná - osel je jednoduše ignoruje. 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 recenzentů tiše zvládne pozici z prvních verzí, s výjimkou opery, která získala podporu této vlastnosti ve své 4. variantě, která vyšla v polovině 90. let.

Práce s pozicí v jаvascriptu

Ve skutečnosti příběh o tom, jak pracovat s vlastností pozice v jаvascriptu, jsme zahrnovali pouze kvůli slušnosti. Vzhledem k tomu, že tato vlastnost nemá ve jménu speciální znaky, můžete použít JS bez jakýchkoli změn, například pro nastavení polohy Relative div, měli byste zahrnout tento řádek: div.style.position = lsquo-relativersquo-.

Jak můžete vidět, všechno je docela jednoduché.

Proč zaujímá relativní pozici 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 pouze tato vlastnost umožňuje snadno přeměnit pevný design na adaptivní, protože jeho aplikace automaticky ovlivňuje veškerý obsah stránky. Dále máme stále čas, abychom zvážili příklady a chyby při používání této hodnoty, a uvidíte její praktickou hodnotu.

Kdy mám použít relativní umístění?

Navíc k uspořádání konvenčních stránek HTML, Position Relative se často používá k vytvoření různých zajímavých efektů. Například, pokud chcete, aby prvek "přišel" na stránku, nebo naopak, vyhledejte hladce jeho hrany, pak tato vlastnost vám pomůže implementovat tento "feint".

Tyto „triky“ jsou realizovány prostřednictvím jаvascript, 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 je v některých případech možné vytvořit relativní hodnoty "hybridní" pozice. CSS, ačkoli vám nedovolí současně nastavit něco jako pozice: absolutní relativní, ale pomocí některých triků stále můžete tento efekt dosáhnout. Tento přístup může být užitečný v těch případech, kdy je třeba vytvořit něco jako komplex tooltip nebo kontextové nabídky. Vzhledem k příkladům určitě budeme popisovat strukturu takového "hybridního".

Příklady využití relativního umístění

Poloha Relative je poměrně jednoduchý, ale flexibilní nástroj, který vám umožní realizovat mnoho zajímavých efektů. Abychom neztráceli čas a prostor při psaní nepotřebných kódů šablon, poskytneme vám některé verbální algoritmy, které mohou zdobit vaše stránky nebo jednotlivé stránky.

Začněme řádkem "vyčerpání". Předpokládejme, že potřebujete prvek, který "bude cestovat" za levým okrajem obrazovky a postupně se přesune na pravou stranu. Chcete-li implementovat tento "mechanismus", musíte nastavit pozici: relativní-levý: -100px, kde -100 je přibližný počet pixelů, které tvoří šířku bloku. Tento styl umožňuje skrýt blok mimo obrazovku a nastavit jej na "výchozí pozici". Nyní můžete použít skript, který každých několik milisekund přidává hodnotu levého vlastnictví, dokud se nestane rovna šířce okna prohlížeče minus šířce prvku. V důsledku toho získáme blok, který se objevuje zpoza levého okraje, proplétal celou obrazovku a "zaparkoval" na pravé straně.

Jiný příklad vám umožňuje vytvořit relativně absolutní prvky. Například můžete zadat absolutní do jiného, ​​který má relativní pozici. V důsledku toho máme "relativní" blok, který nemá velikost, do které je napsán absolutní, schopný projevovat se v pozici, která závisí na prvcích, které předcházejí.

Časté chyby při použití Relativní pozice

Nejčastější chybou při použití relativní pozice je to, že mnoho návrhářů rozvržení zapomene na schopnost rezervovat prostor pro blok, který může být kdekoli. Například pokud máte poměrně velký, umístěný mimo obrazovku a má relativní umístění, objeví se na něm "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 poloze nahoru: 0- levé: .. 0- tedy jeho původní místo.