Relative – absolut – float

För att kunna utnyttja css maximalt är det bra att veta lite om hur positioneringar fungerar och vad det innebär. Arbetar du med stylesheets har du med all säkerhet träffat på definitionerna relative absolute och float.

Utgångsläget för en webbsida där ingen css definition har angetts är ett så kallat statiskt läge – också benämnt som default. Det innebär att alla element, såsom text, bilder, boxar, bilder och så vidare ställer sig i vänsterställt läge.

Position relative

När du använder position:relative kan du förflytta blockets position i top – left – right – bottomlägen i förhållande till hur det normalt skulle ha positionerats i läget default. I klartext innebär det att blocket ligger i ett vänsterställt läge – statiskt läge/default – och du utifrån det vill ändra dess position. Position:relative betyder således att blockets relativa position enbart handlar om blocket i förhållande till sig själv.

Position:relativ i defaultläge

Denna box ligger i läget default – det vill säga den är statisk utan angiven positionering. Du ser det genom att boxen har lagt sig
åt vänster och högst upp till vänster. Css-koden ser ut så här:
#div1 {
background-color:#eee;
width:300px;
}

Som ni såg har vi inte angivit några fler definitioner i vår css än bredd och bakgrund. Vad vi däremot bör vara uppmärksamma på är att så fort vi definierar våra positioner så uppstår genast detta fenomen:

I position:relativ inkluderas alltid avståndet från marginalen till boxen trots att den i positioneringen ändrats.

I klartext innebär detta att om du har ändrat boxens position med 20 pix i både left och top så har vi förvisso flyttat ut boxen från marginalerna. Emellertid räknas fortfarande utrymmet mellan box och kanter in i boxens totala yta även om det ser ut som om vi har flyttat på den. Med andra ord är ytan nu 320 pixlar bred med en box på 300 pixlars bredd plus 20 pixlar på höjden. Det här beror på att boxen fortfarande tar upp samma plats som i defaultläget trots att vi har flyttat på den. Eftersom det tomma utrymmet omfattar boxens yta kan vi inte heller placera något annat där.

När vi då ska placera ut andra element på sidan är det därför viktigt att också räkna med det “tomma” utrymmet i boxen. Risken är annars stor att divblocken inte får plats om man inte är medveten om hur positioneringen fungerar.

Position:relativ i positionerat läge

Denna box ligger i läget relative – och har positionerats 20px från top samt 20px från left. Det svarta utrymmet ingår fortfarande i boxens totala yta. Css-koden:

#div1a {
position:relative;
top:20px;
left:20px;
background-color:#eee;
width:300px;
}

Denna box ligger fortfarande i läget relative – och har positionerats 20px från top samt 20px från left.
Jag placerar nu in en box i position:absolute till höger om denna så ska vi se vad som händer.

Position absolute

När man använder position:absolute frilägger man det specifika blocket från dokumentet. De andra elementen i dokumentet kan därmed inte påverka blockets placering. Nu pratar vi om placering av ett lager på en exakt plats. Med position:absolute kan man också lägga fler lager ovanpå varandra. Men det finns en problematik med position:absolute. Faran är att divblocket inte intar sitt exakta läge om du till exempel har en “flytande” hemsida i procent utan fast bred. Likaså kan det ställa till problem i olika optimeringar och webbläsare, i detta fall WIN IE. Om man specificerar bredden i relativt värde (procent) kommer bredden att utgå (läsas in) av webbläsaren från parent element istället för själva positioneringens element. Det här beror på en bugg i WIN IE.

Ett blockelement i absolut positionerat läge är alltså ett självständigt element som inte är beroende av de andra elementen. Du kan placera det ovanpå ett annat block, uppe i ett av skärmens hörn eller längst ned på sidan.

Den här boxen är placerad med position:absolute. css-koden är denna:
#div3 {position:absolute; top:1400px;right:30px; width:500px;}

Float – clear

Float betyder flyter och det kan man ju räkna ut av namnet. Med float kan man förflytta ett element antingen så långt det är möjligt åt höger eller åt vänster och sedan låta texten kringgärda elementet. Float är därför bra att använda när man till exempel har bilder och vill att texten ska “flyta” runt dessa men är också användbart när man skapar olika divblock till en layout.

Använder du float så måste du avsluta ditt “flytande” område så inte andra element påverkas. Därför lägger man till clear. Clear bryter det flytande området så ingen text eller andra element seglar upp och lägger sig vid sidan av det flytande elementet. Förutsatt att de inte ska göra det förstås. Funktionen som clear har är att den skapar en avgränsning mellan elementet i float och innehållet därunder genom att det trycker ned resterande innehåll så de hamnar på rätt plats – under float. Html-koden är denna: <div class=”clear”></div> och placeras omedelbart efter koden för det flytande elementet.

Detta skriver du i din stilmall:

.clear {clear:both;}

Det går också bra att infoga csskoden för clearmärkningen allra först i csskoden för det nästkommande block som ska infogas direkt efter det flytande elementet. I en layout är det då i div footer man vanligen placerar cssvärdet för clear och behöver således inte lägga ut htmlkoden för clear i själva dokumentet.

#footer {clear:both;}

Float:left/right bild och text

textfloat

Den här bilden har jag valt att lägga i en box med värdet float:left. Texten är däremot skriven utanför boxen inom vanlig styckemärkning, det vill säga inom p-attributet. Css-koden:

#textfloat {
float:left;
padding:10px;
}
.clear{ clear:both;}

Jag har inte heller angett någon bredd på boxen eftersom jag vill att den ska kunna vara relativ, anpassningsbar för innehållet i den. Glöm inte att avsluta med clear-attributet!

textfloat

Den här bilden har jag valt att lägga i en box med värdet float:right. Texten är även här skriven utanför boxen inom vanlig styckemärkning, det vill säga inom p-attributet. Css-koden:

#textfloatright {
float:right;
padding:10px;
}
.clear{ clear:both;}

Jag har inte angett någon bredd på boxen eftersom jag vill att den ska kunna vara relativ, anpassningsbar för innehållet i den. Glöm inte att avsluta med clear-attributet!

Om vi lägger två kolumner i float left så kommer den ena att lägga sig bredvid den andra så länge det finns utrymme för detta.

Float:left två kolumner

Denna box är ställd i läget float:left; Csskoden :

#float1 {
float:left;
width:150px;
background-color:#bbb;
}

Denna box är också ställd i läget float:left; Csskoden :

#float2 {
float:left;
width:150px;
background-color:#f5f5f5;
}

Väljer vi däremot att lägga ett varsitt divblock i left respektive float position kommer de att söka sig mot respektive kant. Det här är den vanligaste placeringen när man skapar sig en layout. Vad som också är viktigt att komma ihåg är hur stort utrymme respektive block har att använda. I de flesta fall har man en “grundbox” – ett divblock man utgår ifrån – vanligtvis kallad wrapper eller container i vilken man sedan placerar sina olika divblock. Blocket wrapper/container har som funktion att hålla samman hela layouten och kan jämföras med ett avgränsat område i vilket informationen ska finnas. Med information menar jag dina andra divblock, texter och bilder. Lägger man sedan till en padding i wrapper måste man ta hänsyn till hur mycket utrymme det är som försvinner så att bredden på blocken inuti får plats. Du kan läsa mer om detta under länken att skapa divblock. Därefter rekommenderar jag dig att även läsa om divblock och boxmodelhack.

Två kolumner positionerad float:left och float:right

Denna box är positionerad float:left. Som du ser så har boxen lagt sig längst ut mot den vänstra kanten.

Sist vill jag bara påpeka att om du väljer att använda floatkommandot kan du givetvis inte samtidigt använda dig av en absolut positionering av boxen. Det går alltså inte att låta boxen vara flytande i en absolut positionering. Vad du däremot kan göra är att placera ditt flytande element på en bestämd plats i själva layouten. Skillnaden är att ditt flytande element då får en på förhand planerad plats i förhållande till de andra div blockens placering. Det är inte detsamma som att ha en absolut positionering därför att det frilagda blocket är inte beroende av de andra blockens placering utan endast till sin egen placering. Ett absolut positionerat block är ett lager du kan placera som flera lager ovanpå varandra.
Tänk på det.

Hoppas att du har haft nytta av denna guide. Är det något du vill förtydliga eller undrar över så kontaktar du givetvis mig.

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *