I CSS kan de olika elementen i ett HTML-dokument betraktas som lådor, eller boxar. Dessa kan
placeras, exakt i förhållande till webbläsarfönstret, eller i förhållande till varandra. De kan
även placeras över och under varandra. En box har marginaler, ett innehåll, ett utrymme mellan kant och
innehåll, en kantlinje med flera egenskaper som kan styras.
För att vi skall begripa hur det hänger ihop har man utvecklat boxmodellen, the box model.
Enligt denna kan ett HTML-element beskrivas som en "låda" på följande sätt:
Denna modell innebär inget konkret du skall göra, men förklarar hur du kan betrakta
innehållet på en sida som använder sig av 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