CSS: Position

12. Position

Alla element i ett dokument behöver inte ligga i en enda lång rad. Det finns flera sätt att positioner element på en sida. Vi tar här kort upp några.

position

Position-elementet används för att placera element fritt i dokumentet. Position-elementet kan anta 3 värden:

absolute: Sätter elementet i dokumentets bakgrund på en fast plats. Gör så att elementet rör sig med dokumentet när det skrollas.
static: Sätter elementet på en fast plats, men det kan inte röra sig vid skrollning.
relative: Sätter elementet i relation till de föregående elementen.

top/bottom/left/right

Top/bottom/left/right-elementen används för att positionera element. Dessa kan med fördel kombineras med position-elementet.

Ex.

Man kan använda absolute för att sätta ett objekt i relation till hela dokumentets axel. Här har vi satt en bild med 100 pixlars förskjutning från överkanten och 300 pixlars förskjutning från vänsterkanten:

Eftersom bilden skulle hamna mitt i dokumentet visar vi inte resultatet här.

Här har vi satt en bild med samma förskjutning, fast från den plats i dokumentet som bilden annars skulle ha hamnat. Vi har då använt position-elementets relative-attribut.

z-index

Ett utmärkt element som gör att man kan arbeta med dokumentets element i olika "lager". Genom att indexera element med vilket djup man vill att det ska ligga, så placeras överlappande element ovanpå respektive under varandra. Dokumenttexten har index 0. Negativa indexeringar placeras under texten och positiva över texten.

Ex. Här har vi satt ett bildobjekt relativt sin position (direkt efter denna text) och förskjutit denna framför den här texten. Därefter har vi satt dess z-index till 1. Bilden kommer då att ligga ovanför texten:

float
Float-elementet används för att få flyt i dokumentet. Det gör så att ett objekt lägger sig till höger eller vänster om föregående objekt istället för direkt under.