Pozice CSS: příklady

Noví umělci make-upu často mají potíže s umístěním prvků pomocí CSS

Specifičnost konstrukce toku dokumentů

Pozice CSS pracuje s tokem webové stránky. Jak to pochopit? Ve výchozím nastavení jsou všechny prvky stránky uspořádány v pořadí, ve kterém jste je vytvořili html-značkování. Pokud je značka záhlaví umístěné nad značkou zápatí, pak na stránce bude zobrazena výše. A naopak, pokud se z nějakého důvodu rozhodnete umístit zápatí v html nad "heder", nad "záhlavím" se zobrazí "suterén" stránky. V tomto případě blokové prvky obsadí veškerou dostupnou šířku pro ně. Malé písmena jsou zase umístěny do jedné řady, dokud nebudou obsazovat vše a pak začnou být přemístěny do nového. Tato objednávka se nazývá "tok dokumentu".

Chcete-li změnit chování toku, použijte vlastnost Pozicev CSS. Také se může lišit v důsledku vlastnictví float, ale neuvažujeme. Pomocí polohování můžete přinutit prvek "vypadnout" z normálního vlákna, po kterém se začne chovat novým způsobem. Jak přesně - závisí na použité hodnotě nemovitosti.

Pozice CSS: statická

Pozice: statická, nebo statické polohování, je výchozí hodnota pro všechny bloky html, které jste vytvořili. Za normálních okolností se s ním nemusíte vyrovnávat. Pokud pro libovolný blok nebo řádek není určeno žádné umístění, má hodnota hodnotu statické. Na stránce je tato součást zobrazena v souladu s průtokem. Pokud pro něj určíte vlastnosti doprava / doleva nebo nahoru / dolů, nebude mít žádný účinek.

Pozice CSS: opraveno

Při použití této vlastnosti, element je mimo normální tok dokumentu. Nyní je jeho pozice vypočtena relativně k oknu prohlížeče, bez ohledu na to, jak jsou umístěny další komponenty. Jinými slovy, blok s polohou: fixní přejít na horní části stránky, přitisknutou na okraji okna prohlížeče, a další prvky zaujme své místo v závislosti na průtoku.

Hlavním rysem pevně umístěných prvků je, že mohou překrývat další bloky a řádky stránek. Při rolování blokem s polohou: fixní Zdá se, že zůstane na místě, aniž by z obrazovky zmizela. To je užitečné, pokud potřebujete vytvořit navigační nebo podobný prvek, ke kterému by měl uživatel vždy mít přístup. Pevné umístění také platí, pokud chcete v určité části stránky umístit tlačítko rychlého posunu.

Pozice CSS: relativní

Použití této vlastnosti se nazývá relativní polohování. Pokud nastavíte vlastnost Položka na pozici: relativní, zůstane na svém místě. Na první pohled se nic zvláštního nestane, ale všechno se změní, pokud navíc použijete vlastnosti doprava / doleva a nahoru / dolů. S jejich pomocí můžete ovládat pohyb komponenty vzhledem k jeho umístění. Na místě, kde byl blok nebo linka předtím, bude prázdný prostor - další prvky zůstanou na svých pozicích, nevěnují pozornost volnému sedadlu.

Při přemísťování komponent neovlivní polohu okolních částí stránky. Zůstanou na svých místech, ačkoli jejich relativně umístěný blok může zablokovat. Samotná nemovitost je zřídka využívána. Obvykle se používá v kombinaci s následující možností.

Absolutní umístění

Jedna z nejzajímavějších a nejčastěji používaných možností. Při použití vlastnosti Pozices hodnotou absolutní Poloha komponenty stránky se vypočítá vzhledem k oknu prohlížeče. Ostatní prvky (které nejsou absolutně umístěné) se zdají "zapomenout" na existenci "kolegu" s pozicí: absolutní a zaujme jeho místo v potoku. Zdá se, že všechno je přesně stejné jako v případě pozice: fixní, Ale existují i ​​vážné rozdíly.

Za prvé, poloha prvku může být volně řízena - používá vlastnosti horní / pravý / dolní / levý. Například pokud zadáte hodnotu dolů: 100px, blok "tlačí" ze spodní strany stránky na 100 pixelů. Zadruhé, při rolování zůstane součást "absolutní" na místě místo toho, aby se pohybovala se stránkou.

Interakce absolutních bloků s nadřazenými prvky

Můžete dosáhnout ještě přesnější kontroly nad absolutně umístěnou komponentou. Chcete-li to provést, musíte nastavit nadřazenou vlastnost Pozice: pevné, relativní nebo absolutní.

Zvažme příklad. Máte div s třídou relativ-div, uvnitř kterého je umístěn div s třídou absolutně div. Nastavte vlastnost Position na vnitřní blok: absolutní. Okamžitě "letí" z proudu a je někde nad, protože nyní je jeho poloha vypočtena vzhledem k oknu prohlížeče. Teď dáme blok s třídou relativní-div Vlastnost pozice: relativní a "bláznivý syn" se vrátí na své místo. Téměř. Ve skutečnosti se to objevuje v levém horním rohu nadřazeného prvku.

Proč se to děje? Bod je ve specifikaci vlastnosti Pozice: absolutní. Ve výchozím nastavení je jeho pozice závislá na okně prohlížeče, ale pokud je "rodič" také umístěn nějakým způsobem jiným než statické, Poloha začíná záviset na rodičovském prvku. To je velmi výhodné, protože můžete umístit komponentu kdekoli bez výpočtu obrovských čísel vzhledem k oknu prohlížeče. Recepce se často používá k umístění ikon, tlačítek a dalších drobných předmětů.

Umístěte CSS uprostřed

Jedním z hlavních problémů pro začátečníky je středění prvku svisle a horizontálně. Vlastnost pozice správně, aby to bylo snadné. Poloha CSS: absolutně ve středu je nastaveno následovně. Předpokládejme, že máte div s třídou absolutně div, kdo je v "diva" s třídou relativní-div. "Nadřazený" je relativně umístěn a jeho šířka se rovná šířce celé stránky. "Dítě" má šířku a výšku 400 px, absolutní polohování a ve výchozím nastavení se nachází v levém horním rohu nadřazeného prvku.

Vše, co musíte udělat, je nastavit absolutní komponentu nahoru: 50% a vlevo: 50%. Téměř hotovo! Absolutně div přesunul se z místa a byl téměř v centru, ale ne docela. Uprostřed "rodiče" se dotýká jeho okraje a potřebujeme, aby bylo centrum "potomka" uprostřed bloku. K tomu je třeba se ho zeptat margin-left a margin-right s hodnotami -200 px. Tímto způsobem přesučíme absolutně umístěný blok na polovinu jeho výšky a šířky. Všechno je v centru!

Překrývající se součásti

Problémem může být obtížné na první pohled "překrývání" umístěných prvků na "sousedích". Například součást s polohou: fixní překryje vše, co se nachází na stránce. K nápravě situace je možné pomocí vlastnictví z-index, Pamatujte však, že funguje pouze pro umístěné prvky. Pokud tedy chcete umístit blok na pevně umístěný prvek, musí být tento blok také umístěn. Například relativní.

Lzpůsob, jak se učit pozici - zvažte příklady Pozice CSS, experimentujte a vyzkoušejte něco vlastní. Pokuste se zjistit, jak jej používat ve spojení s funkcí calc () - umožní to flexibilnější přizpůsobení místa. Nezapomeňte však, že tato vlastnost není určena k sestavení celé "mřížky" stránky. S jeho pomocí je třeba pohybovat relativně malými prvky, jinak byste se mohli snadno zmást.