Můžete určit způsob umístění pro oblast nebo prvek. K tomu slouží vlastnost position. Tato vlastnost udává, jak má být prvek nakonec umístěn. Celkem existuje čtyři různé varianty umístění.
• static – neprovádí se žádné speciální umístění a text bude normálně posunut.
• relative – provede relativní umístění, které se orientuje na normální pozici nebo počáteční pozici prvku.
• absolute – provede se absolutní umístění pomocí vlastností top, bottom, left a right. Absolutně umístěné prvky jsou mimo normální textový proud. Absolutní pozice je vypočítána relativně k okrajům nadřazeného prvku (pokud vlastnosti position: static nemá).
• fixed – prvek je absolutně umístěn. Při posouvání zůstane prvek stát.
První dvě varianty umožňují variabilní umístění. Zde jsou prvky umístěny vzhledem k sobě navzájem. Následující dvě příklady ukazují, jak by mohlo vypadat toto umístění:
• Prvek 2 bude posunut o 30 pixelů ve směru od prvku 1.
• Prvek 2 bude umístěn za prvkem 1.
Avšak pro fixed a static platí něco jiného. Tímto způsobem mohou být prvky umístěny na konkrétní místa. Údaje o umístění se vztahují k nadřazenému prvku nebo oknu prohlížeče. Příklad:
• Prvek 1 bude umístěn přesně 30 pixelů od pravého a 20 pixelů od horního okraje okna prohlížeče.
Níže budou jednotlivé varianty umístění ještě jednou podrobně představeny. Nejprve však upozornění: Floatování hraje důležitou roli v souvislosti s pozicováním prvků. Toto důležité CSS pravidlo si v příštím tutoriálu ještě podrobně a výkladně rozebereme. Zásadně jde o to, jak prvky webové stránky ve strukturu dokumentu proudí. Prvky jsou tak co nejvíce tlačeny do daného směru. Způsobem umístění lze explicitně určit tok prvků.
Relativní umístění
Při použití relativního umístění pomocí position: relative se stane dvě věci:
• Blok bude posunut ze svého normálního toku.
• Původní místo prvku je rezervováno.
Díky rezervaci původního místa se ostatní prvky chovají tak, jako by prvek byl ve skutečnosti stále na svém místě.
Příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Zde byly definovány tři bloky.
Oba bloky 2 a 3 nedostaly žádný příkaz k umístění. Proto následují normální dokumenční proud. Blok 1 byl však umístěn relativně. To znamená, že bloky 2 a 3 zůstávají zcela nedotčené blokem 1. Místo bloku 1 tedy není těmito bloky stěhováno. Skrze údaje top, bottom, left a right je určeno umístění bloků. Při relativním umístění se pohybujeme ve vztahu k původní pozici v dokumentu (Flow).
• top: 25px – blok je posunut o 25 pixelů dolů. V normální pozici bloku je tedy nahoru zaneseno 25 pixelů.
• right: 25px – blok je posunut o 25 pixelů doleva. V normální pozici bloku je tedy doprava zaneseno 25 pixelů.
Pixelové hodnoty jsou chápány vzhledem k původní pozici. Údaje určují, kam bude hodnota zanesena, tedy nahoru a doprava. Tento aspekt je klíčový. Údaje tedy neurčují, kam bude blok posunut.
Absolutní umístění
Pokračujeme s absolutním umístěním. Tento typ umístění odvádí prvek z plném proudu. Ostatní prvky na stránce se chovají tak, jako by prvek vůbec neexistoval.
Příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Zde byly opět definovány tři bloky. Blok 1 je absolutně umístěn.
V tomto případě pro blok 1 není rezervován prostor. Bloky 2 a 3 se posunou nahoru.
Údaje o umístění top, right, bottom nebo left se již neorientují na původní pozici bloku v proudu. Namísto toho se údaje vztahují k nejbližšímu obalovému prvku, který byl umístěn s relative, absolute nebo fixed. Pokud neexistuje žádný obalový prvek, umístění se provádí relativně k nejvyššímu prvku stromu dokumentu, tj. k html.
Fixní pozice
S pomocí position: fixed lze prvky upevnit. Zde je příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Effekt děrovaného panelu část 1</div>
<p>Nové tutoriály nebo video tréninky jsou na online pohledu nebo obsah ze stažení dočasně zdarma. Více informací zde ...</p>
</body>
</html>Upevněné pole nezůstává při posouvání, ale vždy zůstává na přiděleném místě.
Pro fixované panely je okolním prvkem vždy okno prohlížeče.
Upozorňujeme, že při provádění fixace prvků v starších prohlížečích mohou nastat značné potíže. Například IE6 nedělá to, co by měl dělat. Ti, kteří chtějí/optimalizovat své webové stránky i pro tento prohlížeč, mají nyní dvě možnosti:
• Zřeknout se fixovaných panelů.
• Použít hacky pro IE.
Pokud chcete použít hack, doporučuji vám navštívit stránku http://thestyleworks.de/tut-art/iewinfixed.shtml. Zde je ukázáno, jak pomocí jednoduchého JavaScriptu zprovoznit fixované panely i pro tento prohlížeč.
