[ Forrige | Indhold | Næste]

Lektion 14: Positionering af elementer

Med CSS positionering kan du placere et element nøjagtigt hvor på siden du ønsker. Sammen med floats (se lektion 13) giver positionering mange muligheder for at lave et avanceret og præcist layout.

I lektionen vil følgende blive gennemgået:

• Princippet bag CSS positionering
• Absolut positionering
• Relativ positionering

Princippet bag CSS positionering

Forestil dig et browservindue som et koordinatsystem:

Princippet bag CSS positionering er at man kan positionere en hvilken som helst boks hvor som helst i dette koordinatsystem. Lad os f.eks. sige at vi ønsker at positionere en overskrift. Efter boksmodellen (jfr. lektion 9) vil denne overskrift kunne se sådan ud:

Hvis vi ønsker denne overskrift positioneret 100px fra toppen af dokumentet og 200px fra venstre kunne vi skrive følgende i vores CSS:

h1 {
	position:absolute;
	top: 100px;
	left: 200px;
}

Dette vil give følgende resultat:

Som du sikkert kan se er positionering med CSS en meget præcis metode til at placere elementer - og tilmed noget lettere end hvis det samme resultat skulle opnås med tabeller, gennemsigtige billeder, pladsholdere, o.s.v. - det bliver dog bedre endnu, prøv at læse videre om de mange forskellige positionerings metoder du har til rådighed.

Absolut positionering

Når man positionerer et element absolut sættes egenskaben position til absolute. Herefter kan man benyttes sig af egenskaberne left, right, top, og bottom til at placere boksen.

Et element som er absolut positioneret optager ikke plads i dokumentet. Det vil på godt dansk sige at "det ikke efterlader sig et hul" efter at være blevet positioneret.

Som et eksempel på absolut positionering kan vi vælge at placere 4 bokse i hvert sit hjørne af dokumentet:

#boks1 {
	position:absolute;
	top: 50px;
	left: 50px;
}
#boks2 {
	position:absolute;
	top: 50px;
	right: 50px;
}
#boks3 {
	position:absolute;
	bottom: 50px;
	right: 50px;
}
#boks4 {
	position:absolute;
	bottom: 50px;
	left: 50px;
}

 Vis som eksempel

Relativ positionering

For at positionere et element relativt sættes egenskaben position til relative. Forskellen på absolut og relativ positionering er hvordan positionen beregnes.

Positionen for et element, som er relativt positioneret, beregnes udfra Elementets oprindelige placering i dokumentet. Det vil sige at man så at sige blot rykker elementet til højre, venstre, op eller ned. Elementet optager således stadig pladsen i dokumentet, efter det er blevet positioneret.

Som et eksempel på relativ positionering kan vi prøve at positionere 2 billeder i forhold til deres oprindelige placering - læg mærke til hvordan billederne efterlader sig "huller" på deres oprindelige placering i teksten:

#trads {
	position:relative;
	left: 350px;
	bottom: 150px;	
}
#thorsen {
	position:relative;
	left: 150px;
	bottom: 500px;	
}

 Vis som eksempel

Browser-kompatibelitet

Positionering med CSS understøttes af de fleste browsere. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

Vi har i de seneste 2 lektioner lært at floate og positionere elementer. Disse to metoder giver dig mange muligeder for at opbygge dine sider uden at skulle benytte nogsle af de gammeldags metoder med tabeller og gennemsigtige billeder som fyld. Brug CSS istedet - det er mere præcist, giver dig flere fordele - og så er det langt nemmere at vedligeholde.

[ Forrige | Indhold | Næste]