Arnel's WebbFör att använda CSS till layout effektivt, är det bra att veta hur man positionerar sidans innehåll. Då måste man också förstå vad som menas med "box modellen". Alla element i ett dokument fungerar som en rektangulär "box" med ett innehåll som är omgivet av spaltfyllnad (padding), en ram (border) och marginaler (margin).
Marginaler är alltid transparenta. Ramar kan vara både synliga och transparenta. Bakgrunder för ett element sätts för hela ytan innanför ramarna, vilket inkluderar både spaltfyllnad och innehållet. Marginaler, ramar och padding är alla valfria, men för beräkning av position och storlek har de en given standard bredd på noll pixlar om inte annat anges. Andra värden kan ges för varje enskild sida (topp, höger, botten och vänster) om man önskar. Marginaler kan också ha negativa värden.
Bredd och höjd på en box är lika med bredden och höjden på en omslutande box's marginaler. Detta är inte nödvändigtvis samma som höjd och bredd på ytan för innehållet. En box kan innehålla en eller flera andra "inre" boxar, som bildar en hierarki av boxar. Webbläsarens fönster bildar en yttre ram för denna hierarki.
Det finns två huvudtyper av boxar, "block" och "inline". Block-boxar är genererade av element som ex.vis P, DIV och TABLE. Inline-boxar genereras av HTML-taggar som t.ex. B, I eller SPAN samt faktiskt innehåll som text och bilder. Andra typer av boxar genereras av specialelement som listor, men de betraktas som block- eller inline-boxar för positioneringen.
Block-boxar fungerar som innehålls-block för andra boxar innanför dem och de attribut som satts för block-boxen styr även stilen i boxarna innanför om man där inte anger andra stilar. Exempelvis i denna kod:
DIV-elementet bildar i exemplet ett innehålls-block för både den första "lösa" meningen och P-taggen (paragrafen). P-taggen i sin tur bildar ett innehålls-block för den mening som finns i paragrafen. Notera att medan den första meningen i examplet genererar en inline-box, så finns det en block-box som omger den (div).
Dessa "anonyma" block-boxar används för att förenkla positioneringsprocessen. Resultatet blir att en block-box kan innehålla antingen alla inline-boxar eller alla block-boxes, även om en del block-boxar bara används som omslag/hölje för en inline-box.
Detta innehålls-block används för att beräkna både positionen för de invändiga boxarna och i en del fall, även dimensionen på dessa boxar. Om till exampel ett element har en bredd angiven till 50% blir bredden satt till hälften av bredden för det utvändiga blocket.
För varje element som inte är absolut positionerad, får det block som omsluter elementet det utrymme och stil som omslutande block har. Finns inget omslutande block, fungerar webbläsarens fönster som det omslutande blocket.
Det finns fyra positionsmodeller eller "schema" i CSS2: "static", "relative", "absolute" och "fixed". Var och en har sina egna "regler" och alla boxar blir positionerade med en av dessa, men olika boxar använder olika "schema" beroende på deras position och andra stilar som anges för dem.
Static: Boxen är en "normal" box, som visas i förhållande till det normala flödet av innehåll på sidan. Denna position behöver inte heller anges då den är standard när inget annat anges. Block-boxar placeras vertikalt med början uppifrån, där varje block hamnar under den föregående. Inline-boxar placeras horisontellt från vänster till höger.
Float är ett tillägg till det normala flödet som gör att en box först placeras och därefter flyttas ut. En box som "flyter" låter andra boxar lägga sig runt dess kanter. Det är samma princip som när text flyter runt bilder med "align=left". Men i CSS används "float", som till exempel i "float: left" för att text ska "flyta" runt till vänster om en bild eller box.
Värt att notera är också att vertikala marginaler sammanfaller i ett normalt flöde. Om man anger en bottenmarginal för en box och en toppmarginal på en direkt efterföljande box, används bara större värdet av dessa två angivna marginaler. T.ex. bottenmarginal:10px och toppmarginal:12px för två boxar ger en vertikal marginal på 12px mellan dessa boxar.
Relative: Boxens position beräknas utifrån sin position i ett normalt flöde. Genom att ange värden för "utgångsläget" varifrån boxen sedan följer det normala flödet.
Absolute: Boxens position är specifierad med värden för "left", "right", "top" och "bottom" där minst ett horisontellt och ett vågrätt mått måste anges. Exempelvis "left:0px" och "top:0px" placerar boxen i det övre vänstra hörnet av webbläsarens fönster och läget påverkas inte av att man kompletterar med annat innehåll på sidan.
Fixed: Boxens position är beräknad enligt "absolute" modellen, men dessutom fixeras boxens läge i förhållande till webbläsarens fönster och flyttar inte med när man skrollar. Denna positionsmodell stöds dock inte av Internet Explorer, upp till version 6 och frågan är om IE7 kommer att ha stöd för det?
Har man en annan webbläsare än IE, kan man se ett exempel på fixerad position i menyn till vänster. När man skrollar upp eller ner denna sida finns menyn alltid "med", dvs den är fixerad till samma plats i webbläsarfönstret. Men för att få den att hållas i samma absoluta "utgångsläge" (högst upp) i IE som i övriga webbläsare före skrollning, krävs en liten speciallösning:
Först anges "position:absolute" för menykolumnen som kallas "#Col1". Därefter på raden under anges "position:fixed" med hjälp av "body > #Col1", något som IE inte förstår men som andra webbläsare accepterar istället eftersom "position:fixed" anges på raden efter.
