Du kan bestemme posisjoneringstypen for et område eller et element. Denne egenskapen brukt er position. Denne egenskapen angir hvordan et element til slutt skal posisjoneres. Totalt er det fire forskjellige posisjoneringsvarianter å velge mellom.
• static – ingen spesiell posisjonering utføres, og en normal tekstflyt oppstår.
• relative – det utføres en relativ posisjonering som orienterer seg etter elementets normale posisjon eller startposisjon.
• absolute – det utføres en absolutt posisjonering via egenskapene top, bottom, left og right. Absolutt posisjonerte elementer befinner seg utenfor den normale tekstflyten. Den absolutte posisjonen beregnes relativt til forelderens kant (men bare hvis den ikke har egenskapen position: static).
• fixed – elementet blir absolutt posisjonert. Elementet forblir stasjonært mens du blar.
De to første alternativene tillater en variabel posisjonering. Her posisjoneres elementer i forhold til hverandre. De neste to eksemplene viser hvordan denne typen posisjonering kan se ut:
• Element 2 blir plassert 30 piksler forskjøvet i forhold til Element 1.
• Element 2 blir plassert bak Element 1.
Det er annerledes med fixed og static. Dette gjør det mulig å plassere elementer på helt spesifikke steder. Posisjoneringsopplysningene refererer til foreldrelementet eller nettleservinduet. Et eksempel på dette:
• Element 1 blir nøyaktig plassert 30 piksler fra høyre og 20 piksler fra øvre kant av nettleservinduet.
De ulike posisjoneringsvariantene vil bli presentert mer detaljert nedenfor. Først imidlertid en merknad: I forbindelse med posisjonering av elementer spiller såkalt flytning en viktig rolle. Jeg vil gå mer grundig inn på denne viktige CSS-prinsippet i neste opplæring. Grunnleggende handler det om hvordan elementene på nettstedet flyter i dokumentet. Elementene presses så langt som mulig i respektive retning. Gjennom posisjoneringstypen kan elementflyten bestemmes eksplicit.
Den relative posisjoneringen
Ved å bruke relativ posisjonering via position: relative, skjer to ting:
• Boksen blir flyttet ut av sin normale strøm.
• Den opprinnelige plassen til elementet blir reservert.
Ved å reservere den opprinnelige plassen oppfører de andre elementene seg som om boksen faktisk fremdeles er på plassen sin.
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 det definert tre bokser.
Boksene 2 og 3 har ikke fått noen plasseringsinstruksjon. Derfor følger de den normale dokumentflyten. Boks 1 derimot har blitt plassert relativt. Dermed påvirkes ikke boksene 2 og 3 i det hele tatt av boks 1. Plassen til boks 1 blir derfor ikke påvirket av disse boksene. Posisjoneringen av boksene skjer gjennom angivelsene top, bottom, left og right. Ved relativ posisjonering utgås fra den opprinnelige posisjonen i dokumentstrømmen (flow).
• top: 25px – boksen blir flyttet 25 piksler nedover. Øverst på den normale posisjonen til boksen blir det altså satt inn 25 piksler.
• right: 25px – boksen blir flyttet 25 piksler til venstre. Til høyre for den normale posisjonen til boksen blir det altså satt inn 25 piksler.
Pikselangivelsene skal sees i forhold til den opprinnelige posisjonen. Angivelsene bestemmer hvor verdien settes inn, altså over og til høyre. Dette aspektet er avgjørende. Angivelsene bestemmer altså ikke hvor boksen skal bli flyttet.
Den absolutte posisjoneringen
Videre går det med den absolutte posisjoneringen. Denne posisjonstypen fjerner elementet helt fra flyten. De andre elementene på siden oppfører seg som om elementet ikke eksisterer i det hele tatt.
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 det definert tre bokser. Boks 1 er absolutt plassert.
I motsetning til relativ posisjonering er det ikke reservert plass for boks 1. Boksene 2 og 3 skyver seg oppover.
Plasseringsinstruksjonene top, right, bottom eller left orienterer seg ikke lenger etter boksens opprinnelige posisjon i strømmen. Snarere refererer angivelsene til det nærmeste omkringliggende elementet som er posisjonert med relative, absolute eller fixed. Hvis det ikke er et omkringliggende element, posisjoneres det relativt til det øverste elementet i dokumenttreet, altså html.
En posisjonering med fixed
Med position: fixed kan elementer festes. Også 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 Teil 1</div>
<p>Bare for kort tid er den nyeste opplæringen eller videoopplæringen i online-visningen eller innholdet fra nedlastingskategorien poengfritt. Finn ut mer her ...</p>
</body>
</html>Den festede boksen ruller ikke med, men forblir alltid på den tildelte posisjonen.
For festede bokser er det omkringliggende elementet alltid nettleservinduet.
Vær oppmerksom på at det særlig i forbindelse med fiksering av elementer i eldre nettlesere er betydelige problemer. For eksempel gjør IE6 her ikke det det egentlig skulle gjøre. For de som ønsker/er nødt til å optimalisere nettsidene sine for denne nettleseren, har nå to alternativer:
• Unngå festede bokser.
• Bruk hacks for IE.
Hvis du vil bruke en hack, anbefaler jeg siden http://thestyleworks.de/tut-art/iewinfixed.shtml. Der vises det med hjelp av en liten JavaScript hvordan man kan få festede bokser til å fungere også for denne nettleseren.
