I den här artikeln lär du dig att med CSS-egenskapen position och värdena static, relative, absolute och fixed placera olika div-behållare valfritt på en webbsida.
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: De gånger 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 vi arv. Static återställer detta.
Exempel:
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ångsläge.Du kan styra vart innehållet ska placeras med egenskaperna left, right, top och bottom och avståndet anges i pixlar eller em.
Exempel:
Text utan position: relative
Antag att följande CSS-regler skulle användas på ovanstående div-behållare:
div#valfriDiv {
position: relative;
top: 0;
left: 40px;
background-color: yellow;
}
Resultat:
Text med position: relative
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 bra att veta när du felsöker.
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 här nedanför.
Position: absolute
Med position: absolute kan du placera ett element på valfritt ställe på webbsidan. Den absoluta positionering är relativt föräldraelementet.
Du kan använda värdena left, right, top och bottom för att ange positionen som anges i pixlar.
Exempel
En div-behållare (1) omsluter en annan behållare (2). Div-behållare (1) har CSS-formateringen position: relative och därför kommer inneslutna element att vara positionerade gentemot dess gränslinjer om det inneslutna elementet (2) använder sig av position: absolute.
Illustration:
Följande CSS deklarationer (skriven med extern CSS) fungerar för att skapa en likadan ruta som du ser långt uppe i högra kanten till vänster om Webbdesigna.se:s logo med texten "Exempeltext som hör till artikeln. Förklaring i artikeltexten längre ned." [Direktlänk]
div#valfriDiv {
position: absolute;
top: 0;
right:0;
color: #ffcc00;
}
Rutan anpassar sig efter div-behållaren "content-left" som kan sägas innehålla allt som inte är den högra sidomenyn. Denna är satt till relative och därför anpassar sig den gula rutan efter denna.
Mer om position: relative och position: absolute
Låt oss gå igenom fler 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#behallare {
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: absolute;
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: absolute;
top: 0;
right: 0;
width:150px;
height: 200px;
background-color: yellow;
}
Koden för detta - med stilmall - ser då ut enligt nedan:
div id="behallare">
div id ="box1">Box 1</div>
div id="box2">Box 2</div>
</div>
..och vi får:
Position: fixed
Med position: fixed väljer du hur ett visst element ska placeras i förhållande till webbläsarfönstret, fixerat, Det innebär att elementet kommer att finnas vid just den punkten i webbläsarfönstret även när du scrollar.
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"
<<< Färgkoder || Nästa guide: Skapa webbsida
