CSS Tutoriál V. – Pozicování v CSS

V tomto díle se již nebudeme tolik zabývat teorií jako v dílech předchozích, ale spíš praktickým využitím v jedné z nejdůležitějších věcí, které potřebujeme nastavit – a to pozici prvku na stránce.

HTML pozicování se již nepoužívá, protože vše se dá udělat jednoduše v CSS stylu. Možností jak s objektem hýbat je hodně, začneme ale od základů.

Základní pro pozicování v rámci stránky je vlastnost position. Má 2 základní hodnoty a to absolute a relative. Absolutní pozice znamená, že objekt se posune přesně na určené souřadnice bez ohledu na okolní věci. Relativní pozicí určujeme použe o kolik se objekt posune od své výchozí pozice. Další hodnotou je fixed, která určuje prvku místo na stránce, které se nemění ani když scrollujeme. Pozor – výchozí hodnota position je static, při které nemá left nebo right žádný význam. Příklad použití absolutní pozice:

p {
 position:absolute;
 left:100px;
 top:150px;
 }

Další způsoby jak objekt na stránce posunout určitým směrem je rozhodně margin. Margin nám určuje vzdálenost od vnějšku objektu. Hodnotu marginu můžeme zapsat v px, %, cm… etc. Pokud chceme prvek na prostředek stránky, použijeme margin: auto. Můžeme specificky nastavit, který okraj chceme jak velký, pro to použijeme margin-top, margin-left, margin-right a margin-bottom. Pokud se nám nechce vypisovat, platí, že můžeme zapsat všechny hodnoty okrajů pod prostou vlastností margin.

margin: 10px 5px 2px 6px; = margin top - 10px, margin right - 5px, margin bottom - 2px, margin left - 6px
margin: 10px 2px 3px; = margin top - 10px, margin right and margin left - 2 px, margin bottom - 3px
margin: 15px 20px; = margin top and margin bottom - 20 px, margin right and margin left - 20 px
margin: 10px; = všechny okraje jsou 10px

Co se týče zarovnání elementů na stránce, občas se hodí spíše vlastnost float. Ta nám určuje, jestli se element přichytí k pravé straně nebo k levé. Toto se nám hodí například u obrázkových galerií, kde se obrázky zarovnají vždy k jedné straně. Jeho zápis by tedy vypadal u obrázku například takto:

img {
float:left;
}

Pokud nechceme aby vedle nějakého prvku bylo něco zarovnané, použijeme vlastnost clear. Pokud napíšeme clear: left, nebudou na levé straně žádné prvky přilepené, pokud clear:right, nebudou na pravé. Můžeme také použít clear:both.

Pro nastavení překrývání prvků použijeme vlastnost z-index.Tato vlastnost nabývá číselných hodnot, kladných nebo záporných, podle pořadí, v jakém chceme prvky na stránce mít. Čím větší z-index vůči ostatním bude, tím bude „výše“. Čím bude nižší, tím bude níže, případně úplně vespod.

.vespod {z-index: 0;}
.prostredni {z-index: 1;}
.nahore {z-index: 2;}

Hlavní věci o pozicování jsme snad zvládli a můžeme se pustit dále do dalších praktických vlastností a jejich hodnot v dalším díle, tentokrát pro úpravu textu.