Du kan bestämma positioneringen för ett område eller ett element. För detta används egenskapen position. Denna egenskap anger hur ett element ska positioneras till slut. Totalt finns det fyra olika positioneringsvarianter att välja bland.
• static - ingen speciell positionering görs och normal textflöde sker.
• relative - en relativ positionering sker, som orienterar sig vid elementets normala eller inledande position.
• absolute - en absolut positionering sker genom egenskaperna top, bottom, left och right. Absolut positionerade element befinner sig utanför det normala textflödet. Den absoluta positionen beräknas relativt till förälderselementets kanter (men endast om detta inte har egenskapen position: static).
• fixed - elementet positioneras absolut. Vid rullning stannar elementet.
De första två varianterna möjliggör en variabel positionering. Här positioneras element i förhållande till varandra. De följande två exemplen visar hur denna typ av positionering skulle kunna se ut:
• Element 2 placeras 30 pixlar förskjutet i förhållande till Element 1.
• Element 2 placeras bakom Element 1.
Det förhåller sig annorlunda med fixed och static. Med dessa kan element placeras på mycket specifika platser. Positioneringsanvisningarna hänvisar till det överordnade förälderselementet eller webbläsarfönstret. Ett exempel på detta:
• Element 1 placeras exakt 30 pixlar från högra kanten och 20 pixlar från övre kanten på webbläsarfönstret.
Här presenteras de olika positioneringsvarianterna detaljerat igen. Innan detta, en anteckning: I samband med att positionera element spelar så kallad Float en viktig roll. I nästa handledning går jag igenom detta viktiga CSS-princip utförligt. I grunden handlar detta om hur elementen på webbplatsen flyter i dokumentet. Elementen pressas så långt som möjligt åt respektive håll. Genom positioneringstypen kan elementflödet specifikt bestämmas.
Den relativa positioneringen
Genom att använda relativ positionering via position: relative händer två saker:
• Rutan flyttas ur sitt normala flöde.
• Elementets ursprungliga plats reserveras.
På grund av reservationen av elementets ursprungliga plats beter sig de andra elementen som om elementet faktiskt fortfarande fanns där.
Ett exempel:
<!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> /pre>
Här har tre rutor definierats.
Rutorna 2 och 3 har inte fått någon instruktion om positionering. De följer därför det normala dokumentflödet. Rutan 1 positionerades dock relativt. Därför påverkas inte rutorna 2 och 3 alls av ruta 1. Dessa rutor tar alltså inte upp plats från dessa rutor. Genom angiven top, bottom, left och right positioneras rutorna. Vid relativ positionering utgår man från objektets ursprungliga position i dokumentflödet (Flow).
• top: 25px - rutan flyttas nedåt med 25 pixlar. 25 pixlar läggs till högst upp på rutans normala position.
• right: 25px - rutan flyttas 25 pixlar åt vänster. 25 pixlar läggs till på höger sida av rutans normala position.
Pixelmåtten ses relativt till den ursprungliga positionen. Angivelserna bestämmer var värdet läggs till, det vill säga högst upp och till höger. Denna aspekt är avgörande. Instruktionerna bestämmer inte var rutan flyttas.
Den absoluta positioneringen
Vidare går det med den absoluta positioneringen. Denna positioneringstyp tar helt bort elementet från flödet. De andra elementen på sidan beter sig som om elementet inte alls fanns där.
Ett exempel:
<!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> /pre>
Här har också tre rutor definierats. Ruta 1 är absolut positionerad.
Till skillnad från relativ positionering är inget utrymme reserverat för Ruta 1. Rutorna 2 och 3 flyttas uppåt.
Positioneringsanvisningarna top, right, bottom eller left orienterar sig inte längre vid elementets ursprungliga position i flödet. Snarare hänvisar angivelserna till det närmaste omgivande elementet som positionerats med relative, absolute eller fixed. Om det inte finns något omgivande element, sker positioneringen relativt till det översta elementet i dokumentträdet, alltså till html.
En positionering med fixed
Med position: fixed kan element fixeras. Här är ett exempel:
<!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>Endast för en kort stund är den senaste handledningen eller video-masterklassen i onlinevisningen eller innehållet från nedladdningskategorin poängfri. Ta reda på mer här ...</p>
</body>
</html>
Den fixerade rutan rullar inte med, utan förblir alltid på den tilldelade positionen.
För fixerade lådor är det omgivande elementet alltid webbläsarfönstret.
Observera att det särskilt i samband med fixering av element i äldre webbläsare finns betydande problem. Till exempel gör IE6 inte det som det egentligen borde göra här. Om ni vill/måste optimera era webbplatser även för denna webbläsare, har ni nu två alternativ:
• Avstå från fixerade lådor.
• Använda hack för IE.
Om ni vill använda ett hack, rekommenderar jag sidan http://thestyleworks.de/tut-art/iewinfixed.shtml. Där visas med hjälp av en liten JavaScript hur man får fixerade lådor att fungera även för denna webbläsare.
