CSS

Placering av element med CSS: position och float

Ett elements placering kan vara fixerad på sidan, relativ i förhållande till andra boxar, samt flytande (float). Detta kan bestämmas genom egenskaperna position respektive float.

Om man inte anger något annat, kommer boxarna att följa varandra en efter en, från vänster till höger, uppifrån och ned, detta kallas hos w3c det normala flödet (the normal flow).

I de flesta fall använder du mått för CSS-egenskaperna top, right, bottom och/eller left för att positionera elementen. Du kommer också att använda mått för margin och padding i samband med positionering, beroende på behov.

position: static
Innebär att boxen följer det normala flödet, liksom den skulle göra om inget annat var sagt. Detta är utgångsläget om inget annat sägs i CSS. top , right, bottom eller left kan inte användas
position: relative
Boxen placeras med hjälp av top, right, bottom och/eller left relativt den placering den skulle få i det normala flödet.
position: absolute
Boxen placeras i förhållande till sin närmaste positionerade förfader (ancestor) (boxen som boxen befinner sig i) och tas alltså ur det normala flödet. Placeras med top, right, bottom och/eller left
.
position: fixed
Boxen placeras i förhållande till webbläsarfönstret och tar inte hänsyn till någonting annat. ett fixed-element kommer till exempel inte följa med när du scrollar. Placeras med top, right, bottom och/eller left
.
position: sticky
Det nyaste värdet till position. Man kan säga att det är ett mellanting mellan absolute och fixed. Det betyder att den kommer att ha en fixerad position inuti den innehållande boxen. Om användaren scrollar i en box/ett block kommer sticky-elementet behålla sin plats i den boxen. Placeras med top, right, bottom och/eller left
.

Utöver detta kan en box vara flytande, få egenskapen float, detta innebär att den kommer att "flyta" i en viss riktning på sidan. Ett element kan ha antingen position eller float, inte både och.

float: left
Boxen hamnar till vänster
float: right
Boxen hamnar till höger
float: none
Boxen följer det normala flödet

Egenskapen float kan kompletteras med egenskapen clear i angränsande boxar, som talar om hur innehållet i dessar skall bete sig när de stöter på en float.

clear: left
Innehållet flyttas ned för att lämna plats åt floats till vänster
clear: right
Innehållet flyttas ned för att lämna plats åt floats till höger
clear: both
Hela boxen flyttas undan när den stöter på floats
clear: none
Boxen tar ingen hänsyn till flytande element

Testa! Du kommer att upptäcka massor av sätt att arbeta med detta.

Länkar