Pozice CSS: Příklady

Rošáci jsou často obtížně polohovatelnými prvky pomocí CSS. Ve skutečnosti je vlastnost CSS Position mnohem jednodušší se naučit, než se zdá na první pohled. Po zvládnutí získáte mocný nástroj, který vám umožní uspořádat všechny prvky stránky na správných místech. K dosažení výsledku však musíme znát všechny existující významy, protože principy jejich jednání se velmi liší

Specificita vytváření toku dokumentu

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í, v jakém jste je vytvořili v html značce. Pokud se záhlaví značky nachází nad značkou zápatí, stránka se zobrazí výše. Naopak, pokud se nějak rozhodnete umístit zápatí v html nad "hostitelem", nad "kloboukem" se zobrazí "suterén" stránky. V tomto případě blokové prvky zaujímají celou šířku, kterou mají k dispozici. Lineární, po druhé, jsou uspořádány v jednom řádku, dokud nezačnou všechny a potom začnou být přeneseny do nového. Tato objednávka se nazývá tok dokumentu. "


Chcete-li změnit chování toku, použijte vlastnost Pozice v CSS. Může se také změnit kvůli vlastnostem plováku, ale nebudeme to považovat. Pomocí polohování je možné přinutit prvek "vypadnout" z obyčejného proudu, po kterém se začne chovat novým způsobem. Jak přesně - závisí na hodnotě použitého majetku.

Pozice CSS: statická

Pozice: statické nebo statické polohování je výchozí hodnota všech html bloků, které jste vytvořili. Za normálních okolností se s ním nemusíte vyrovnávat. Pokud pro libovolný blok nebo řádek není vůbec určena žádná pozice, pak má hodnotu statickou. Na stránce se tato složka zobrazí podle streamu. Pokud zadáte pravý /levý nebo horní /dolní vlastnosti, nebude mít žádný vliv.


Pozice CSS: pevné

Při použití této vlastnosti se prvek nachází mimo normální tok dokumentu. Nyní je jeho pozice vypočtena vzhledem k oknu prohlížeče, bez ohledu na to, jak jsou umístěny další komponenty. Jinými slovy, poloha: pevný blok se dostane do horní části stránky, kolí na okraj okna prohlížeče a ostatní prvky nahradí jeho místo podle streamu.
Hlavním prvkem prvků s pevnou polohou je to, že mohou překrývat další bloky a řetězce stránek. Když posunujete blok s polohou: pevná bude zřejmě zůstat na místě, aniž by z obrazovky zmizela. To je užitečné, pokud potřebujete navigaci nebo podobnou položku, ke které má uživatel vždy přístup. Pevné umístění také platí, pokud chcete umístit tlačítko rychlého posuvu na konkrétní část stránky.

Pozice CSS: relativní

Použití této vlastnosti se nazývá relativní polohování. Pokud nastavíte položku Pozice: relativní, to je jednazůstane na místě. Na první pohled se nic zvláštního nestane, ale všechno se změní, pokud použijete vlastnosti vpravo /vlevo a nahoru /dolů dodatečně. S jejich pomocí můžete ovládat pohyb součásti vzhledem k jeho umístění. Na místě, kde byl blok nebo linka předtím, bude prázdný prostor - ostatní prvky zůstanou ve svých pozicích, aniž by se věnovaly volnému prostoru.
Při přemísťování komponent neovlivňuje polohu okolních částí stránky. Zůstanou na svých místech, ačkoliv jejich blok může zablokovat. Samotný majetek je zřídka využíván. Obvykle se používá v kombinaci s následující možností.

Absolutní polohování

Jedna z nejzajímavějších a nejčastěji používaných variant. Při použití vlastnosti Pozice s absolutní hodnotou součásti se součást stránky započítává do okna prohlížeče. Jiné prvky (ne absolutně umístěné), jako by "zapomněla" na existenci "sestry" s Pozicí: absolutní a zaujala místo v proudu. Zdá se, že všechno je přesně stejné jako v případě pozice: fixní, ale existují vážné rozdíly.
Za prvé, poloha prvku může být volně řízena - pro toto použití vlastnosti horní /pravé /dolní /levé. Například pokud nastavíte dolní hodnotu na: 100px, blok bude "zdržen" v dolní části stránky o 100 pixelů. Za druhé, když rolování je "absolutní" složkazůstane na místě namísto navigace přes stránku.

Interakce absolutních bloků s rodičovskými prvky

Je možné dosáhnout ještě přesnější kontroly nad absolutně polohovací komponentou. Chcete-li to provést, musíte nastavit vlastnost otce. Pozice: fixní, relativní nebo absolutní. Zvažte příklad. Máte div s třídou relativní-div, uvnitř které je div třída s třídou absolutně div. Interní blok nastavíme na pozici: absolutní. Okamžitě "letí" z proudu a objeví se někde výše, protože jeho poloha je nyní vypočtena ve vztahu k oknu prohlížeče. Nyní nastavíme blok s relativní třídou Div pozice: relativní a "bláznivý syn" se vrátí na 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? Případ ve specifikách pozice: absolutní vlastnost. Ve výchozím stavu závisí na stavu prohlížeče, ale pokud je "rodič" umístěn někde jinde než statický, pozice začíná záviset na rodičovském prvku. To je velmi výhodné, protože můžete umístit komponentu kdekoliv, aniž byste započítávali obrovské čísla v okně prohlížeče. Recepce se často používá k umístění ikon, tlačítek a dalších drobných předmětů.

Pozice CSS uprostřed

Jedním z hlavních problémů pro začátečníky je středění prvku svisle a horizontálně. Správně pomocí vlastnosti Pozice je jednodušší, aby to bylo jednoduché. Poloha CSS: absolutní ve středuje nastaven následovně. Předpokládejme například, že jste absolvovali třídu absolute-div, která je v božské třídě relativní-div. "Otec" je umístěn s ohledem na šířku, která se rovná šířce celé stránky. "Potomčí" má šířku a výšku 400 px, absolutní umístě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í horní komponentu: 50% a vlevo: 50%. Téměř hotovo! Absolutní div se přestěhoval z místa a ocitl se téměř v centru, ale vůbec ne. Uprostřed "otce" se vztahuje k jeho regionu a potřebujeme centrum "potomstva" uprostřed bloku. Chcete-li to provést, musíte nastavit margin-left a margin-right s hodnotami -200 px. Tím budeme přesunout absolutně umístěný blok o polovinu jeho výšky a šířky. Vše, co je v centru!

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

Problém může být na svých "sousedech" komplikovaný na první pohled "překrývání" polohovacích prvků. Například složka s polohou: fixed bude překrývat vše, co se nachází na stránce. Situaci můžete vyřešit pomocí vlastnosti z-indexu, ale pamatujte na to, že funguje pouze pro pozice položek. Podle toho, pokud chcete umístit blok přes pevně umístěnou položku, bude tento blok také muset nastavit polohování. Například relativní. Nejlepší způsob, jak zvládnout polohování, je podívat se na příklady pozice CSS, experimentovat a vyzkoušet něco ve svém vlastním. Zkuste se učitpoužijte jej ve spojení s funkcí calc () - umožní vám flexibilněji nastavit polohu. Nezapomeňte však, že tato vlastnost není určena k vytvoření celé mřížky stránky. Použijte jej k přesunu relativně malých prvků, jinak může být velmi snadné se zmást.

Související publikace