Môžete určiť typ pozície pre oblasť alebo element. Na tento účel sa používa vlastnosť position. Táto vlastnosť určuje, ako má byť nakoniec umiestnený element. Celkovo sú k dispozícii štyri rôzne varianty pozícionovania.
• static - nevykonáva sa špeciálne pozícionovanie a prebieha normálny tok textu.
• relative - dochádza k relatívnemu pozícionovaniu, ktoré sa orientuje na normálnu alebo počiatočnú pozíciu elementu.
• absolute - dochádza k absolútnemu pozícionovaniu cez vlastnosti top, bottom, left a right. Absolútne pozícionované prvky sa nachádzajú mimo normálneho toku textu. Absolútna pozícia sa vypočíta vzhľadom na okraje rodičovského elementu (ak tento nemá vlastnosť position: static).
• fixed - prvok je absolútne pozícionovaný. Pri posúvaní zostáva prvok na svojom mieste.
Prvé dve varianty umožňujú variabilné pozícionovanie. Tu sa prvky pozícionujú vzhľadom na seba navzájom. Nasledujúce dva príklady ukazujú, ako by mohla vyzerať táto forma pozícionovania:
• Prvok 2 bude umiestnený o 30 pixelov posunutý vzhľadom na Prvok 1.
• Prvok 2 bude umiestnený za Prvok 1.
S inými je to inak s fixed a static. Pomocou nich možno prvky umiestniť na úplne konkrétne miesta. Údaje o pozícií sa vzťahujú na nadradený rodičovský element alebo na okno prehliadača. Príklad:
• Prvok 1 bude presne umiestnený 30 pixelov od pravého okraja a 20 pixelov od horného okraja okna prehliadača.
Ďalej sú podrobne predstavené rôzne varianty pozícionovania. Predtým však upozornenie: V súvislosti s pozícionovaním prvkov hraje dôležitú úlohu tzv. floating (plávanie). Na tomto dôležitom princípe CSS sa v nasledujúcom didaktickom texte znovu podrobne zastavím. V podstate ide o to, ako prvk...
Relatívne pozícionovanie
Použitím relatívneho pozícionovania pomocou position: relative sa deje dve veci:
• Box je posunutý z bežného toku.
• Pôvodné miesto prvku je rezervované.
Vďaka rezervovaniu pôvodného miesta sa ostatné prvky správajú tak, akoby tento prvk v skutočnosti ešte stále existoval na svojom mieste.
Prí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>Boli tu definované tri boxy.
Oba boxy 2 a 3 nedostali žiadne pokyny o pozícionovaní. Preto nasledujú bežný tok dokumentu. Box 1 bol však pozicionovaný relatívne. Tým zostávajú boxy 2 a 3 úplne nedotknuté boxom 1. Miesto boxu 1 nie je teda týmito boxamy využívané. Pozícionovanie bôxov sa uskutočňuje pomocou údajov top, bottom, left a right. Pri relatívnom pozícionovaní sa počíta s pôvodnou pozíciou v dokumentovom toku (Flow).
• top: 25px - box je posunutý o 25 pixelov nadol. Hore sa teda v normálnej pozícii boxu vloží 25 pixelov.
• right: 25px - box je posunutý o 25 pixelov doľava. V pravej časti normálnej pozície boxu sa teda vloží 25 pixelov.
Pixely sa vnímajú voči pôvodnej pozícii. Údaje určujú, kde bude hodnota zahrnutá, teda hore a vpravo. Toto je rozhodujúci aspekt. Údaje teda neurčujú, kam bude box presunutý.
Absolútne pozícionovanie
Pokračujeme s absolútnym pozícionovaním. Tento typ pozície úplne vyňíma prvok z toku. Ostatné prvky na stránke sa správajú tak, akoby prvek vôbec neexistoval.
Prí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>Opäť bolo definovaných tri boxy. Box 1 je absolútne pozícionovaný.
Oproti relatívnemu pozícionovaniu nie je pre Box 1 rezervovaný žiadny miesto. Boxy 2 a 3 sa posunú nahor.
Údaje o pozícií top, right, bottom alebo left sa už neriadia pôvodnou pozíciou boxu v toku. Skôr sa tieto údaje vzťahujú k nasledujúcemu okolitému elementu, ktorý bol pozícionovaný s relative, absolute alebo fixed. Ak neexistuje žiadny okolitý element, pozíciu sa vypočíta relativne k najvyššiemu elementu v dokumentovom strome, teda k html.
Umiestnenie s fixným pozíciou
S position: fixed možno prvky upevniť. Tu je prí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">Splitter-Effekt Teil 1</div>
<p>Na krátky čas je najnovšie tutorial alebo videoškolenie dostupné online bez bodovanej skúšky alebo obsah z kategórie na stiahnutie. Získajte tu viac informácií ...</p>
</body>
</html>Fikovaná box sa neposúva s posúvaním obsahu, ale zostane vždy na pridelenom mieste.
Pre fixované boxy je okolitým prvkom vždy okno prehliadača.
Prosím, všimnite si, že najmä v súvislosti so zafixovaním prvkov môžu byť v starších prehliadačoch vážne problémy. Napríklad IE6 nerobí to, čo by mal. Kto chce/optimalizovať svoje webové stránky aj pre tento prehliadač, má teraz dve možnosti:
• Zriecť sa fixovaných boxov.
• Používať hacky pre IE.
Ak chcete použiť hack, odporúčam vám tento web http://thestyleworks.de/tut-art/iewinfixed.shtml. Ukazuje sa tam, ako zafixovať boxy aj pre tento prehliadač pomocou malého JavaScriptu.
