HOME    SKRIPTY
7. díl seriálu o CSS - Pozicování
Tibor Szolár | 31. května 2007

Pozicování je jednou zpokročilejších schopností CSS. Pomocí pozicování můžeme určit pozici jakéhokoli objektu na stránce, ale nejčastěji se pozicování využívá právě pro beztabulkové laouty stránek.

Všechno se nastavuje pomocí několika CSS vlastností:

position - určuje nám typ pozicování objektu. Může nabývat hodnot:
absolute - absolutní pozice, vmístě stránky kde by byl element umístěn bez pozicování, se nevyhradí žádné místo. Vlastnosti udávající polohu elementu se zadávají od levého horního rohu nejbližšího nadřazeného blokového elementu.
relative - relativní pozicování. Vmístě kde by byl element původně umístěn bez pozicování se vyhradí pro element místo. Vlastnosti udávající polohu elementu se zadávají od původní pozice elementu, který chcete pozicovat.

Left - určuje vzdálenost elementu od levého okraje. Hodnoty můžete zadat ve standardních délkových jednotkách CSS nebo vprocentech.

Top - určuje vzdálenost elementu od horního okraje. Hodnoty můžete zadat ve standardních délkových jednotkách CSS nebo vprocentech.

Right - určuje vzdálenost elementu od pravého okraje. Hodnoty můžete zadat ve standardních délkových jednotkách CSS nebo vprocentech.

Bottom - určuje vzdálenost elementu od dolního okraje. Hodnoty můžete zadat ve standardních délkových jednotkách CSS nebo vprocentech.

Poznámka:
Některé starší prohlížeče nepodporují Right a bottom, takže snimi opatrně!

Dále je pak ještě třeba, aby pozicovaný element byl blokový objekt a aby měl určenou nejméně jednu rozlohovou vlastnost. (width nebo height).

A teď praxe:
Pokud chceme mít na stránce červený element široký 300px začínající na 50 pixelu od shora a od leva bude mít vzdálenost 100px, uděláme to následovně:

.element {position: absolute; width:300; left: 100; top: 50; background-color: red}

<html>
<head>
<title>priklad CSS pozicovani</title>
<style>
.element {position: absolute; width:300; left: 100; top: 50; background-color: red}
</style>
</head>
<body>
<div class="element">Heh, absolutni pozicovani je ale kuuul, zejo? ;-)</div>
</body>
</html>

Výsledek:

CSS

(klikněte pro plnou velikost)


Tak, to by byl tak nejjednoduší příklad využití pozicovaného CSS v praxi.

Velice zajímavé a užitečné je také použití procent jako délkových jednotek. Díky tomu můžeme vytvořit layout, který se bude dynamicky zvětšovat/zmenšovat podle velikosti okna prohlížeče. Třeba nastavíme šířku levého menu na 20%, tělo bude umístěno právě 20% od levého okraje a bude mít šířku 60%. Poté bude ještě pravé menu se šíkou 20% umístěné na 80% z leva. A celé se nám to bude hezky roztahovat do okna prohlížeče i bez specialních pomocných skritpů, které stejně běží jenom v některém prohlžeči. ;-) To je podle mě hlavní kouzlo CSS pozicování.
Ale dost bylo řečí. Jak tohle provést v praxi?
Takhle:

<html>
<head>
<title>priklad CSS pozicovani - kuul layout</title>
<style>
.hlavicka {position: absolute; width:100%; height:20%; left: 0; top: 0; background-color: red}
.menu {position: absolute; width:20%;left: 0; top: 20%; background-color: green}
.telo {position: absolute; width:60%;left: 20%; top: 20%; background-color: blue}
.prave_menu {position: absolute; width:20%;left: 80%; top: 20%; background-color: green}
</style>
</head>
<body>
<div class="hlavicka">Tak tohle je hlavicka. Sem prijde logo a tak....</div>
<div class="menu">Menu - navigace, odkazy a tak</div>
<div class="telo"><h1>Text dokumentu</h1>Bla bla bla. Tady taky neco bude. :D</div>
<div class="prave_menu">Prave menu. Volne vyuzitelne. Muzete sem dat novinky, dalsi odkazy nebo cokoliv jineho.</div>
</body>
</html>


Výsledek vypadá více než přesvědčivě.

CSS

Nebojte se s CSS pozicováním experimentovat. :o)