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).

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
position: relative
Boxen placeras med hjälp av top, right, bottom och 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) och tas alltså ur det normala flödet.
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.

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.