Relativní pozice - co to je? Podrobný popis
HTML layout 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ě, 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ím jak pro jazyk HTML, tak pro jeho spojence CSS. Jedná se o to, co CSS je, pro co je to a co "fechy s ušima" vám dovolí vstát, a také o jednom z jeho oblíbených vlastností - relativní pozici - budeme mluvit dnes.
Co je to CSS?
Slovo "stoly" v oficiálním překladu se ukázalo býttéměř náhodně - ve skutečnosti by bylo vhodnější použít slovo "listy" nebo "seznamy", nicméně autoři původního překladu rozhodli, že CSS vypadá spíše jako seznam než seznam a kdo je nyní musí soudit.
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 musí prohlížeč využívat řadu pravidel, aby správně vytvořil vzhled bloku, který má několik stylů, zatímco jeden z nich má například pozici Relativní vlastnost a druhou - Position Absolute. 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 jméno 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í přejdeme přímo k nemovitostiPoloha, 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 ohledech je tato hodnota podobná předchozí, nicméně, zatímco absolutní prvek je připojen k rodiči, pevné používá pouze souřadnice v levém horním rohu obrazovky prohlížeče, nevěnoval pozornost ostatním prvkům, které 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říklad pomocí "pohřben" prohlížečeIE6, nemůžete použít hodnoty Fixed and Inherit - "donkey", které jednoduše ignorují. Navzdory skutečnosti, že ze sedmé verze se situace začala opravovat a společnost Fixed byla již zpracovávána, dědit všechny, kteří měli rádi "prohlížeč pro stahování jiných prohlížečů", získali pouze ve své osmé podobě.
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 Javascriptu
Ve skutečnosti příběh o tom, jak pracovats vlastností Pozice v Javascriptu jsme zahrnovali pouze kvůli vhodnosti. 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 můžete vidět, všechno je docela jednoduché.
Proč zaujímá relativní postavení zvláštní pozornost?
Zatímco většina hodnot nemovitostiUmístění, mírně řečeno, "plivání" na okolní prvky, s použitím hodnoty "stylová pozice: relativní", vždy stojí za to pamatovat celou stránku jako celek, protože její nesprávné použití může silně "deformovat" celý obsah obrazovky.
Kdy mám použít relativní umístění?
Kromě rozvržení běžných stránek HTML, PositionRelativní 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".
Podobné "triky" jsou implementovány přes Javascript,nebo pokud se snažíte o postupné rozvržení, pomocí vlastností CSS3, které vám umožňují konfigurovat cyklickou změnu hodnoty proměnné.
Příklady využití relativního umístění
Poloha relativní - je to docela jednoduché, aleFlexibilní nástroj, který umožňuje provádět 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. K zavedení takového "mechanismu" musíte nastavit polohu: relativní; vlevo: -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ě.
Další 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í.
Běžné chyby při použití relativní pozice
Nejčastější chyba kdypomocí relativní pozice je to, že mnoho návrhářů rozvržení zapomene na možnost rezervovat prostor pro blok, který může být kdekoli. Například, pokud máte poměrně velký, umístěný mimo obrazovku as relativní polohou, na jeho místě uvízne "díra". Nicméně i tato vlastnost, která někdy vytváří určité nepříjemnosti, může být užitečná například vytvořením zajímavého efektu "samoobslužného" webu, ve kterém jsou všechny jeho bloky postupně umístěny v horní poloze: 0; vlevo: 0; na své původní místo.
