Saate määrata piirkonna või elemendi positsioneerimise tüübi. Selleks kasutatakse position omadust. See omadus määrab, kuidas element peaks lõpuks positsioneerima. Kokku on selle jaoks neli erinevat positsioneerimisvõimalust.
• static - erilist positsioneerimist ei toimu ja tavaline tekstivool toimub.
• relative - toimub suhteline positsioneerimine, mis orienteerub elemendi normaalpositsioonist või alguspositsioonist.
• absolute - toimub absoluutne positsioneerimine üle omaduste top, bottom, left ja right. Absoluutselt positsioneeritud elemendid asuvad tavalisest tekstivoolust väljaspool. Absoluutne positsioon arvutatakse suhteliselt emaselemendi servadeni (kuid ainult juhul, kui see pole varustatud omadusega position: static).
• fixed - element positsioneeritakse absoluutselt. Kerimisel jääb element paigale.
Esimesed kaks varianti võimaldavad muutuvat positsioneerimist. Siin positsioneeritakse elemendid üksteise suhtes. Järgmised kaks näidet näitavad, kuidas see positsioneerimise viis võiks välja näha:
• Element 2 positsioneeritakse 30 pikslit nihutatult element 1 suhtes.
• Element 2 asetatakse elemendi 1 taha.
Teisiti käituvad fixed ja static. Nendega saab elemente paigutada väga konkreetsesse kohta. Positsioneerimisandmed viitavad ülemisele emaselemendile või veebibrauseri aknale. Üks näide selle kohta:
• Element 1 asetatakse täpselt 30 pikslit paremalt ja 20 pikslit ülevalt veebibrauseri äärest.
Allpool tutvustatakse erinevaid positsioneerimise variante veel üksikasjalikumalt. Enne aga olgu mainitud: Elementide positsioneerimise osas on oluline roll nn ujuvusel (Float). Selle olulise CSS-põhimõttega tulen järgmises õpetuses veel põhjalikumalt toime. Grundsätzlich geht es bei diesem Floaten darum, wie die Elemente der Webseite im Dokument fließen. Dabei werden Elemente so weit wie möglich in die jeweilige Richtung gepresst. Durch die Art der Positionierung lässt sich explizit der Elementfluss bestimmen.
Suhteline positsioneerimine
Suhtelise positsioneerimise kasutuselevõttu läbi position: relative juhtub kaks asja:
• Kast nihkub oma tavapärasest voolust.
• Elemendi algne koht on reserveeritud.
Kuna algse koha reserveeritakse, käituvad teised elemendid nii, nagu element oleks tegelikult endiselt oma kohal. Üks näide:
<!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: suhteline;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kast 1</div>
<div>Kast 2</div>
<div>Kast 3</div>
</body>
</html>Siin on määratud kolm kasti.
Kastidel 2 ja 3 ei ole asukohta määratud. Seetõttu järgivad nad normaalset dokumendi voolu. Kast 1 on aga suhteliselt positsioneeritud. Sellega jäävad kastid 2 ja 3 kastist 1 puutumata. Kast 1 koht ei ole nende kastide poolt hõivatud. Positsioneerimiseks kasutatakse top, bottom, left ja right andmeid. Suhtelise positsioneerimise puhul lähtutakse kasti algsest asukohast dokumendi voolus (vool).
Absoluutne positsioneerimine
Edasi liikudes on järjekorras absoluutne positsioneerimine. See positsioneerimismeetod võtab elemendi täielikult voolust välja. Teised saidi elemendid käituvad nii, nagu element ei eksisteeriks üldse.
<!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: absoluutne;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kast 1</div>
<div>Kast 2</div>
<div>Kast 3</div>
</body>
</html>Siin on määratud ka kolm kasti. Kast 1 on absoluutselt positsioneeritud.
Vastupidiselt suhtelisele positsioneerimisele ei ole kasti 1 jaoks kohta reserveeritud. Kastid 2 ja 3 tõusevad ülespoole.
Positsioneerimisandmed top, right, bottom või left ei ole enam orienteeritud kastile algse asukoha järgi voolus. Vastupidi, andmed viitavad järgmisele ümbritsevale elemendile, mis on positsioneeritud kui relative, absolute või fixed. Kui sellist ümbritsevat elementi pole, positsioneeritakse suhteliselt dokumendipuu ülemiseimale elemendile, stiilile html.
Fikseeritud paigutus
Kasutades position: fixed, saab elemente fikseerida. Siin on üks näide:
<!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>Vaid lühikese aja jooksul on uusim õpetus või videokoolitus veebivaates või allalaaditava sisuna punktivaba. Lisateabe saamiseks klõpsake siia ...</p>
</body>
</html>Fikseeritud kast ei liigu, vaid jääb alati määratud asukohta.
Fikseeritud kastide puhul on ümbritsevaks elemendiks alati brauseriaken.
Palun pange tähele, et vanemate brauseritega võib fikseeritud elementide puhul tekkida tõsiseid probleeme. Näiteks IE6 ei käitu alati nii, nagu peaks. Kui soovite oma veebilehti optimeerida ka selle brauseri jaoks, on teil kaks võimalust:
• Loobuge fikseeritud kastidest.
• Kasutage IE jaoks häkke.
Kui soovite häkki kasutada, soovitan külastada lehte http://thestyleworks.de/tut-art/iewinfixed.shtml. Seal näidatakse, kuidas kasutada fikseeritud kaste ka sellele brauserile.
