Du kan bestemme positioneringen af et område eller et element. Dette gøres ved hjælp af position-egenskaben. Denne egenskab angiver, hvordan et element endelig skal positioneres. Der er i alt fire forskellige positioneringsmuligheder.
• static – der udføres ingen speciel positionering, og en normal tekststrøm finder sted.
• relative – der udføres en relativ positionering, som orienterer sig efter elementets normale position eller startposition.
• absolute – der udføres en absolut positionering vha. egenskaberne top, bottom, left og right. Absolut positionerede elementer er uden for den normale tekststrøm. Den absolutte position beregnes relativt til forældreelementets kanter (men kun hvis dette ikke har egenskaben position: static).
• fixed – elementet positioneres absolut. Når der scrolles, forbliver elementet på plads.
De første to varianter muliggør en variabel positionering, hvor elementer positioneres i forhold til hinanden. De følgende to eksempler viser, hvordan denne positionering kunne se ud:
• Element 2 placeres 30 pixels forskudt i forhold til element 1.
• Element 2 placeres bag element 1.
Det forholder sig anderledes med fixed og static. Disse muligheder tillader at placere elementer på helt konkrete steder. Positioneringsoplysningerne henviser enten til det overordnede forældreelement eller browservinduet. Et eksempel hertil:
• Element 1 placeres præcist 30 pixel fra højre kant og 20 pixel fra øverste kant af browservinduet.
Nedenfor præsenteres de forskellige positioneringsvarianter detaljeret. Først dog en note: I forbindelse med positionering af elementer spiller det såkaldte float en vigtig rolle. Jeg vil komme ind på dette vigtige CSS-princip i den næste vejledning. Grundlæggende handler det om, hvordan elementerne på hjemmesiden flyder i dokumentet. Elementer presser så vidt muligt mod de respektive retninger. Elementstrømmen kan eksplicit bestemmes ved hjælp af positioneringstypen.
Den relative positionering
Ved brug af relativ positionering med position: relative sker to ting:
• Boksen flyttes væk fra sin normale strøm.
• Den oprindelige plads for elementet reserveres.
På grund af reserveringen af den oprindelige plads opfører de andre elementer sig, som om elementet stadig var på sin plads.
Et eksempel:
<!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>Her er tre bokse defineret.
Boksene 2 og 3 har ikke fået nogen positioneringsanvisninger og følger derfor den normale dokumentstrøm. Boks 1 er derimod relativt positioneret. Derfor påvirkes boksene 2 og 3 slet ikke af boks 1. Disse bokses plads bliver altså ikke krævet af disse bokse. Gennem angivelserne top, bottom, left og right sker positioneringen af boksene. Ved relativ positionering tages der udgangspunkt i den oprindelige placering i dokumentstrømmen (Flow).
• top: 25px – boksen forskydes 25 pixel nedad. Øverst på boksens normale position tilføjes der derfor 25 pixel.
• right: 25px – boksen forskydes 25 pixel mod venstre. Til højre for boksens normale position tilføjes der derfor 25 pixel.
Pixelangivelserne betragtes i forhold til den oprindelige position. Angivelserne bestemmer, hvor værdien tilføjes, altså i toppen og til højre. Dette er afgørende. Angivelserne fastlægger således ikke, hvor boksen flyttes hen.
Den absolutte positionering
Næste trin er den absolutte positionering. Denne positionstype tager elementet helt ud af strømmen. De andre elementer på siden opfører sig, som om elementet slet ikke var til stede.
Et eksempel:
<!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>Også her er der defineret tre bokse. Boks 1 er absolut positioneret.
I modsætning til relativ positionering er der ikke reserveret plads til boks 1. Boksene 2 og 3 rykker opad.
Positioneringsangivelserne top, right, bottom eller left orienterer sig nu ikke længere efter boksens oprindelige position i strømmen. Angivelserne henviser snarere til det næste omkringliggende element, som er positioneret med relative, absolute eller fixed. Hvis der ikke er noget omkringliggende element, foretages positioneringen relativt til det øverste element i dokumenttræet, dvs. til html.
En positionering med fast
Med position: fixed kan elementer fastgøres. Her er et eksempel:
<!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 Del 1</div>
<p>Kun for en kort periode er den nyeste tutorial eller video-træning i online-visning eller indhold fra download-kategorien punktefri. Læs mere her ...</p>
</body>
</html>Den fastgjorte boks følger ikke med i rulningen, men forbliver altid på sin tildelte position.
For fastgjorte bokse er det omgivende element altid browservinduet.
Vær opmærksom på, at der især i forbindelse med fastgørelse af elementer er betydelige problemer med ældre browsere. For eksempel gør IE6 ikke det, den faktisk skal gøre. Hvis du vil/må optimere dine hjemmesider også til denne browser, har du nu to muligheder:
• Afstå fra fastgjorte bokse.
• Brug hacks til IE.
Hvis du vil bruge en hack, anbefaler jeg dig at besøge siden http://thestyleworks.de/tut-art/iewinfixed.shtml. Her vises det, hvordan man får fastgjorte bokse til at virke for denne browser ved hjælp af lidt JavaScript.
