I den här artikeln lär du dig att att positionera olika div-taggar valfritt på en webbsida med CSS-egenskapen position. Artikeln kräver att du har läst igenom och förstått XHTML-guiden.
CSS-positionering
Olika sätt att placera innehåll på en webbsida
I XHTML-kapitlen lärde du dig tidigare att taggen div används för att skilja ut olika områden på webbsidan. I den här artikeln lär du dig att styra var olika div-element ska placeras på en webbsida med CSS-egenskapen position och dess värden static, relative, absolute och fixed.
position: static
Med position: static lägger sig innehållt exakt där det skulle lägga sig även utan formatering. Därför uppstår givetvis även följdfrågan: varför ska man använda sig av static? Svaret är att du använder det om ett annat omslutande div-element använder någon annan form av css-positionering som påverkar det inre div-området på ett oönskat sätt via arv. Static återställer detta.
Exempel med stilmall:
div#valfriDiv {
position: static;
font-size: 10px;
font-weight: bold;
}
position: relative
Med position: relative flyttar du det påverkade innehållet till önskat ställe men med det ursprungliga stället som utgångspunkt.Du kan styra vart innehållet ska placeras med left, right, top och bottom och avståndet anges i pixlar eller em.
Exempel:
Text utan position: relative
Exempel med stilmall
div#valfriDiv {
position: relative;
top: 0;
left: 40px;
background-color: yellow;
}
Text med position: relative
Kommentar: Kort om arv
Som du ser i exemplen ovan så har stycket en vänsterpadding och högerpadding på 40px utan att jag har angett det i CSS-exempelkoden. Detta beror på att texten ligger i ett div-element som jag redan har formaterat med CSS, dvs den div som innehåller den här artikeltxten. Diven i exemplet ovan ärver alltså egenskaper från föräldern, den omslutande div-taggen något som definitivt är värt att veta!
Du kan även välja att enbart ange "position: relative" för att på så sätt ange att innehåll som omsluts av denna tagg ska placeras i relation till denna tagg via position: absolute. Mer om detta i relative och absolute i kombination.
position: absolute
Position: absolute har den fördelen att du kan placera ett element på valfritt ställe på webbsidan. Du kan använda värdena left, right, top och bottom för att ange positionen som anges i pixlar.
Exempel med stillmall
div#valfriDiv {
position: absolute;
top: 0;
right:0;
color: #ffcc00;
}
Jag har skrivit en text "Exempeltext- inget att bry sig om" som formaterats enligt ovan. Om du scrollar längst upp på sidan och kollar i högra hörnet så ser du att texten placerats korrekt. Nämnas bör att jag tagit bort marginalerna på texten för att spara plats, annars hade texten ärvt artikeltext-divens marginaler som i exemplet ovan.
Kombinera relative och absolute
Div-taggar kan nästlas vilket innebär att de kan omsluta varandra och därigenom påverka de omslutna div-taggarna. En omslutande div kan på så sätt fungera som en utgångspunkt för de omslutna div-taggarna för positionering av innehållet.
Exempel:
Vi kan börja med ett behållarelement (div) med bredden 300px och höjden 200px. Detta kommer att hålla två andra div:ar och därför anger vi position som relative eftersom vi vill att innehållet ska positioneras i förhållande till behållarelementet.
div#behållare {
position: relative;
width: 320px;
height: 220px;
background-color: #cccccc;
}
Därefter skapar vi dessa "boxar" som innehåll:
1. En box som kommer att lägga sig uppe till vänster i behållarelementet:
div#box1 {
position: absolut:
top: 0;
left: 0
width:150px;
height: 200px;
background-color: blue;
}
2. En box som kommer att lägga sig uppe till höger i behållarelementet:
div#box1 {
position: absolut:
top: 0;
right: 0
width:150px;
height: 200px;
background-color: yellow;
}
Koden för detta - med stilmall - ser då ut enligt nedan:
div id="behållarelement">
div id ="box1">Box 1</div>
div id="box2">Box 2</div>
</div>
..och vi får:
Nu kanske du blir sugen på att kolla källkoden för detta på den här webbsidan? Isåfall bör du vara medveten om att jag satt till extra marginaler för att få en snyggare layout. Jag har inte använt mig av en stilmall utan istället skrev jag in CSS:en direkt i XHTML:en. Det kan alltid vara nyttigt att undersöka båda alternativen. Du kan välja "view source" (källkod) bland menyerna i ditt webbläsarfönster (olika beroende på vilken webbläsare du använder dig av).
position: fixed;
Med position: fixed kan du välja att ett visst element ska placeras i förhållande till webbläsarfönstret - fixerat! Det innebär att texten kommer att finnas vid denna punkt även när du scrollar texten.
Exempel:
div#valfriDiv {
position: fixed;
left: 0;
bottom: 0;
background-color: #003366;
color: #ffcc00;
width: 100px;
}
Om du tittar i nedre vänstra hörnet så har jag lagt in en text "Exempeltext med absolute:fixed"
