Za določeno območje ali element lahko določite vrsto pozicioniranja. Za to se uporablja lastnost position. Ta lastnost določa, kako naj bo končno pozicioniran določen element. Na voljo je skupno štiri različne možnosti pozicioniranja.
• static – posebno pozicioniranje se ne izvede in poteka običajno besedilni tok.
• relative – izvede se relativno pozicioniranje, ki se orientira na normalno pozicijo ali začetno pozicijo elementa.
• absolute – izvede se absolutno pozicioniranje preko lastnosti top, bottom, left in right. Absolutno pozicionirani elementi se nahajajo izven običajnega besedilnega toka. Absolutna pozicija je izračunana relativno glede na robove starševskega elementa (vendar samo, če ta nima lastnosti position: static).
• fixed – element je absolutno pozicioniran. Med pomikanjem element ostane na mestu.
Prve dve varianti omogočata spremenljivo pozicioniranje. Tukaj se elementi pozicionirajo glede na druge. Naslednja dva primera prikazujeta, kako bi ta način pozicioniranja lahko izgledal:
• Element 2 je postavljen 30 slikel naprej v zvezi z Elementom 1.
• Element 2 je postavljen za Element 1.
Z drugačnim principom delujeta fixed in static. S temi je mogoče elemente postaviti na zelo specifična mesta. Pozicija se nanaša na starševski element ali brskalnikovo okno. Primer:
• Element 1 je natančno postavljen 30 pikslov od desnega in 20 pikslov od zgornjega roba brskalniškega okna.
Spodaj bodo predstavljene različne variante pozicioniranja še enkrat podrobno. Pred tem pa opomba: Glede pozicioniranja elementov ima pomembno vlogo tudi tako imenovano plavljenje. Na ta pomemben CSS princip se bom podrobno osredotočil v naslednjem vodiču. Osnovno gre pri plavljenju za to, kako elementi spletne strani plujejo v dokumentu. Elementi so pritisnjeni tako daleč kot je mogoče v določeno smer. Glede na način pozicioniranja je tako mogoče natančno določiti tok elementov.
Relativno pozicioniranje
Z uporabo relativnega pozicioniranja preko position: relative se zgodi dve stvari:
• Polje se premakne iz svojega običajnega tega.
• Izvorno mesto elementa ostane rezervirano.
Z rezervacijo izvirnega mesta se drugi elementi obnašajo, kot da je element še vedno na svojem mestu.
Primer:
<!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>Tukaj so bila določena tri polja.
Polji 2 in 3 nista prejeli navodil za pozicioniranje. Sledita običajnemu toku dokumenta. Polje 1 pa je bilo relativno pozicionirano. Zaradi tega polji 2 in 3 ostajata popolnoma nepotrepljena od polja 1. Položaj polja 1 torej ni vplival na ta polja. Pozicioniranje polj se vrši preko podatkov top, bottom, left in right. Pri relativnem pozicioniranju se pozicija določi iz izvirnega položaja v dokumentnem toku (Flow).
• top: 25px – polje se premakne za 25 pikslov navzdol. Na običajni poziciji polja je zgoraj dodanih 25 pikslov.
• right: 25px – polje se premakne za 25 pikslov levo. Na običajni poziciji polja je zgoraj dodanih 25 pikslov.
Pikselne vrednosti so glede na izvorno pozicijo. Podatki določajo, kam bo vrednost dodana, torej zgoraj in desno. Ta vidik je ključen. Podatki torej ne določajo, kam bo polje premaknjeno.
Absolutno pozicioniranje
Nadaljujemo z absolutnim pozicioniranjem. Ta vrsta pozicioniranja popolnoma odstrani element iz toka. Drugi elementi na strani se obnašajo, kot da element sploh ne obstaja.
Primer:
<!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>Tudi tukaj so bila določena tri polja. Polje 1 je absolutno pozicionirano.
Drugim kot pri relativnem pozicioniranju ni rezerviranega prostora za polje 1. Polji 2 in 3 se premakneta navzgor.
Podatki za pozicioniranje top, right, bottom ali left se sedaj ne več ne orientirajo na izvirni položaj polja v toku. Namesto tega se podatki nanašajo na naslednji okoliški element, ki je pozicioniran z relative, absolute ali fixed. Če ni okoliškega elementa, se pozicioniranje izvede relativno glede na najvišji element v drevesu dokumenta, torej glede na html.
Pozicioniranje z fixed
Z position: fixed lahko fiksirate elemente. Tukaj je primer:
<!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">Učinek ločilca, del 1</div>
<p>Najnovejši vadnici ali videoposnetki so za kratek čas brezplačni za ogled v spletni različici ali vsebina iz kategorije za prenos. Več izvedite tukaj ...</p>
</body>
</html>Fiksirano polje se ne pomika skupaj z ostalo vsebino, ampak ostane na določeni poziciji.
Za fiksirana polja je vedno okoljski element brskalnikovo okno.
Opomba: Pri fiksiranih poljih se lahko pojavijo težave z zamikom pri starejših brskalnikih. Na primer, IE6 ne deluje tako, kot bi moral. Če želite optimizirati svojo spletno stran tudi za ta brskalnik, obstajata dve možnosti:
• Opustitev fiksiranih polj.
• Uporaba popravkov za IE.
Če želite uporabiti popravek, vam priporočam obisk strani http://thestyleworks.de/tut-art/iewinfixed.shtml. Tam je prikazano, kako s pomočjo majhnega skripta lahko fiksirana polja delujejo tudi v tem brskalniku.
