 |
Positionering av boxar |
2. Tre principer för placeringen av boxar
3. Float och clear
4. Position: absolute
5. Position: fixed
6. Lagereffekter
Obs!
Alla exempel öppnas i ett nytt fönster!
1. Inledning
Den här sidan tar upp positionering, som är den tekniska benämningen på placeringen av olika boxar. Det jag skriver här är framförallt hämtat från CSS2-specifikationens kapitel 9.3-9.10.
Positionering med stilmallar fungerar halvdant i Explorer, men knappast alls i Netscape, version 6 undantagen. Man bör alltså ha en relativt modern webbläsare för att kunna dra nytta av positioneringens möjligheter.
Positionering möjliggör nämligen sådant som placeringen av text och bilder i olika lager, vilket betyder att man kan placera text ovanpå bilder. Åtminstone i teorin, som vi nu skall se närmare på.
2. Tre principer för placeringen av boxar
I specifikationen finns tre grundläggande principer för hur boxar kan placeras på sidan. Man talar om normal, float och positioned.
Normal
Normal innebär att man låter de olika boxarna placeras normalt på sidan. Det innebär att block-boxarna placeras under varandra och inline-boxarna placeras efter varandra. Normalflödet behöver man alltså inte styra utan det sköts helt automatiskt, utan att någon kod behöver skrivas in.
Detta har du fått lära dig på de föregående sidorna. Däremot kan man göra vissa smärre justeringar med kommandot display, även om funktionaliteten var något begränsad; se även kapitel 9 i specifikationen.
Float
Float är ett tillägg till det normala flödet och innebär att boxen först placeras efter block- och inline-principerna och därefter flyttas ut på kanterna. En box som flyter eller flödar, låter andra boxar lägga sig runt dess kanter.
Du har redan stött på denna princip när du fått text att flyta runt bilder med kommandot <IMG align="left">. Men i stilmallsspråket använder man i stället egenskapen float. Här är ett exempel:
IMG { float: left; margin: 5px }
Positionerad
Positionering (positioning) är en term som ofta förekommer i specifikationen. Där betyder det oftast bara att man placerar boxar på sidan på olika sätt, enligt någon av de tre principerna "normal", "float" och "positioned".
Men i vanligt språkbruk bland webbutvecklare, har termen fått en något snävare innebörd. Då står den enbart för den senare, "positioned". Och positionerade boxar är placerade på ett sådant sätt att det normala flödet är satt ur spel.
Läser man specifikationen måste man ha dessa saker klart för sig, annars blir man ganska snart förvirrad. Där pratas nämligen även om egenskapen position, vars två första värden, static och relative, används för att styra det normala flödet av boxar. Dessa tar jag dock inte upp till vidare diskussion, men den som är intresserad kikar naturligtvis i specifikationen, särskilt kapitel 9.3.
Följande varianter finns för egenskapen position. Man kan använda i princip vilket element som helst:
IMG { position: static }
IMG { position: relative }
IMG { position: absolute }
IMG { position: fixed }
De två sistnämnda är dem jag tänker koncentrera mig på här. De gör det möjligt att placera en box var som helst på sidan, oberoende av den övriga layouten. Detta kommer jag att berätta mer om i nästnästa avsnittet. Först måste jag emellertid säga något om "floating boxes".
3. Float och clear
"Floats" är ett substantiv för "boxar som flyter" och lägger sig längs höger- eller vänstermarginalen. Andra boxar kan sedan i sin tur flyta runt den flytande boxen. Särskilt användbart är detta för bilder. I stället för att i varje bildelement skriva:
<IMG align="right" vspace="5" hspace="5" ...>
kan man låta en stilmall styra inställningen för alla bilder i dokumentet. Den ser ut så här:
IMG {
float: right; (eller left)
margin-left: 5px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
}
Här har jag krånglat till det lite och tagit bort högermarginalen för IMG-boxen, eftersom jag vill spara plats till höger om mina bilder. Texten skall sedan flyta runt bilderna med ett avstånd om 5 pixlar.
Så här blir det i praktiken >>
Ibland vill man att ett nytt stycke i texten skall hamna på en egen rad under bilden. HTML-kommandot för detta är ju:
<BR clear="all">
Det finns en motsvarighet till detta för stilmallar och det ser ut så här:
P.img { clear: both }
Man skapar alltså en klass för alla de stycken som man vill skall börja på ny rad efter bilden. Klassen hämtas med kommandot:
<P class="img">
Så här blir det i praktiken >>
Egenskapen clear neutraliserar alltså float-värdet och skapar en icke-flytande box. Värdena som normalt används är "left", "right" och "both".
4. Position: absolute
För att placera en box utanför det normala flödet på sidan, krävs två olika inställningar. Dels måste man tala om att den skall placeras "absolut", alltså icke-normalt, dels måste man ange var någonstans på sidan boxen skall placeras. Här är ett exempel på hur det kan skrivas:
#special {
position: absolute;
top: 20px;
left: 100px;
}
Man behöver inte ange bottom eller right här, eftersom webbläsaren lägger in boxen med början uppifrån vänstra hörnet: 20 pixlar från övre delen av sidan och 100 pixlar från vänster. Eftersom inställningen är absolut är det också lämpligt att använda en ID-selektor, dvs man hänvisar till stilmallen inuti t.ex IMG med hjälp av attributet id.
För vanliga element kan man bestämma sådant som boxens bredd, höjd och bakgrundsfärg. Dock bör man tänka på att en absolut placerad box inte följer det vanliga flödet och därför eventuellt kommer att skymma de boxar som hamnar bakom.
För att undvika sådana fadäser kan man använda sig av lager, som jag berättar mer om i avsnitt 6.
5. Position: fixed
En fixerad box flyttar sig i förhållande till de andra boxarna, men befinner sig alltid på samma ställe i webbläsarens fönster. Det betyder att den stannar kvar i synfältet även när man scrollar. Här är ett exempel:
IMG.special {
position: fixed;
top: 5px;
left: 10px;
}
Tanken bakom denna funktion är att man skall kunna använda sig av logotyper, vilka alltid syns överst på sidan och som skrivs ut överst på alla sidor. I specifikationen står det att man skall kunna skapa sidor som ser ut som frames utan att vara det. Man hittar också ett ganska omfattande exempel i kapitel 9.6.
Man bör självklart arbeta med en viss försiktighet här, inte bara därför att olika webbläsare inte klarar av koden, utan framförallt för att det är en typ av effekt som man väldigt sällan kommer att ha användning för. Den som vill ha bättre kontroll sparar i stället sitt dokument i PDF-format.
6. Lagereffekter
Hittills har jag bara talat om boxarnas placering i bredd- och höjdled. Man kan säga att placeringen har skett längs en x- respektive y-axel.
Men boxar kan även placeras i olika lager, längs en tänkt z-axel, som bilden visar. Genom att placera boxarna ovanpå varandra, längs z-axeln, kan man skapa olika slags effekter, t.ex text på bilder. Observera dock att man fortfarande kan lägga flera boxar på samma lager, som tidigare.
Det var faktiskt Netscape som var först med lagereffekter i HTML-dokument. Man använde sig då av elementet LAYER. När HTML-standarden skulle uppdateras till version 4, lyckades man dock inte övertala W3C att ta med LAYER. I stället kom finessen med när stilmallsstandarden uppdaterades till CSS2.
Fördelen med att använda lager är också att man slipper få boxar som krockar med varandra eller som flyttar på varandra. Det fungerar dock inte särskilt bra i Netscape, så man kan också lägga till LAYER om man vill. Jag är dock en motståndare till browserspecifika element och går inte igenom hur man gör här.
Den som vill bygga sidor som alla kan se gör klokt i att strunta i lager. Använd i stället tabeller och stå ut med att saker och ting inte ser ut exakt så som man tänkt. Risken är annars stor att man målar in sig i ett hörn, där man till sist tvingas bygga flera olika versioner av sina sidor, för olika versioner av webbläsare.
Nåväl, i specifikationen talas det om boxarnas stack-levels. Ordet "stack" kan enklast översättas med "stapel". Boxarna ligger alltså staplade på varandra i olika lager.
Ju högre z-värde en box har desto högre upp ligger den i stapeln och desto närmare den som tittar på sidan hamnar den. Här är ett exempel:
P.variant_1 {
position: absolute;
top: 10px;
left: 20px;
z-index: 1;
background: blue;
font-size: 18px;
}
P.variant_2 {
position: absolute;
top: 40px;
left: 50px;
z-index: 2;
background: yellow;
font-size: 24px;
font-variant: italic;
font-family: Impact;
}
P.variant_3 {
position: absolute;
top: 60px;
left: 90px;
z-index: 3;
background: red;
font-size: 20px;
font-family: Times, serif;
}
Boxar som får ett z-indexvärde brukar reagera lite olika. Normalt skall de tillåta att bakomliggande lager syns igenom, men använder man bakgrundsfärg i boxen, kan detta sättas ur spel.
Här är samma exempel utan bakgrundsfärg >>
Är det lättare att använda "position: absolute" än "position :relative"? Ja, oftast, eftersom man då placerar ut objekten där man vill ha dem på sidan. Med relativ placering placerar man nämligen ut boxarna relativt någon annan box. Det kan också vara svårt att beräkna var den andra boxen kommer att hamna, som i detta exempel:
P { position: absolute; top: 50; right: 5; }
DIV { position: relative; top: -50px; right: -100px; }
De exempel jag visat är kanske inte så roliga, eftersom de bara visar hur det ser ut när man lägger in boxar och lager. Man kan dock skapa en ganska tuff layout med olika lager, t.ex så här:
P.variant_1 {
position: absolute;
top: 10px;
left: 20px;
z-index: 1;
background: #000099;
font-size: 72px;
color: #CCCCFF;
}
P.variant_2 {
position: absolute;
top: 40px;
left: 50px;
z-index: 2;
font-size: 48px;
font-variant: italic;
font-family: Impact;
color: #FFFFCC;
}
P.variant_3 {
position: absolute;
top: 60px;
left: 90px;
z-index: 3;
font-size: 24px;
font-family: Times, serif;
color: red;
}