Skip to content

Relative – absolute – float

Uppdaterat 3 april 2017

Om clear:float och clearfix:after. Idag anges clear:float annorlunda genom att vi kan använda CSS pseudo class-elementen :after och/eller :before för att avsluta ett/flera flytande element. Exempelkod 1 specificerar blocket som berörs (wrapper). Nummer 2 specificerar flera element. Exempel 3 är global.


Nummer 1
.wrapper:after { content: ''; display: block; clear: both; }


Nummer 2 (wp-specifik)
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .entry-footer:before, .entry-footer:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after, .nav-links:before, .nav-links:after, .pagination:before, .pagination:after, .comment-author:before, .comment-author:after, .widget-area:before, .widget-area:after, .widget:before, .widget:after, .comment-meta:before, .comment-meta:after { content: ""; display: table; table-layout: fixed; }


Nummer 3
.clearfix:after { content: ""; display: table; clear: both; }

Läs mer om clear-attributet:


Positioneringar

Uppdaterat 3 april 2017

Clear-attributet används i kombination med hur/var våra positionerade element, exempelvis float:left respektive float:right, ska ”clearas” (avslutas), i synnerhet om vi vill ha flera block som ligger bredvid varandra. Idag har man övergått till att använda display.  Display är en egenskap med flera olika värden beroende hur du vill positionera dina html-element. De två absolut vanligaste värden är display:inline och display:block. Men det finns många fler värden att använda.

inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Det går fortfarande bra att använda de traditionella float-attributen men de fasas ut allt mer till fördel för de nyare, mer effektiva, och kodvänligare teknikerna.

Läs mer om display:


Vad är positionering?

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 i flödet 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. Flödet börjar alltid från vänster till höger.

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

En block i läget default – det vill säga att den är statisk utan angiven positionering – lägger sig således åt vänster och högst upp till vänster. Css-koden kan se ut så här:
#div1 {
background-color:#eee;
width:300px;
}

Som ni ser har jag inte angivit några fler definitioner i vår css än bredd och bakgrundsfärg. 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:

Position:relativ i positionerat läge

I position:relative inkluderas däremot alltid avståndet från marginalen till boxen trots att den i positioneringen ändrats. Boxen ligger fortfarande i läget relative – och har positionerats 20px från top samt 20px från left.

 Css-koden:

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

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 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 ”responsive” 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.

Följande exempelkod med position:absolute ger oss ett block som är positionerat 1400px från toppmarginalen, 30px från den högra marginalen, och blocket är 500px brett:
#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!

Liknande poster:

Published inCSS

Be First to Comment

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *