kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » Positioneringar: Relative – absolute – float och z-index

Positioneringar: Relative – absolute – float och z-index

Postad: 21 december 2007 | CSS-guider | No Comments
Lästid: 8 minuter

Den här guiden fokuserar på positioneringarna relative, absolute, float och z-index samt clear:float och clearfix:after.

Idag anges clear:float på nytt sätt eftersom 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.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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

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.

CSS-syntaxen är följande:

position: static|absolute|fixed|relative|sticky|initial|inherit;

Utöver ovanstående så har vi ytterligare några ”hjälpande” egenskaper.

top | right | bottom | left | (och z-index)
Viktigt! Dessa hjälp-egenskaper fungerar inte med position:static eller utan en deklarerad position.

z-index hur fungerar det?

Default/standard staplingsordning

Först ska vi kika på hur standardordningen ser ut när webbläsaren staplar element ifall inget z-index används.

  1. Rotelement ( -elementet)
  2. Icke-placerade element i den ordning de definieras
  3. Positionerade element i den ordning de definieras

Ett icke-placerat element är ett element med statiskt standardvärde. Ett placerat element är ett element med något annat positionsvärde som exempel absolute, relative, sticky eller fixed.

XYZ

Vi har höjden (y-axeln – vertikal) och bredden (x-axeln – horisontell) som två dimensioner. Z är den tredje dimensionen. Du kan positionera element ovanpå/under eller bakom/framför varandra, beroende på hur man vill se det.

Z-index positions

Bildkälla: https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/images/cc190397.jolt_zorder_04(en-us,vs.95).png

Ingen angiven z-index på ett element innebär att det ligger längst bort/underst från besökaren sett i läget default som motsvarar z-index 0. Ju lägre värde desto längre bort hamnar elementet.

Det går även utmärkt att använda ett negativt värde på z-index, exempelvis z-index:-3; Man tvingar då elementet ned under zero – default.

Lager -3
Lager -2
Lager -1
Lager 0 (default lager eller ingen z-index angiven)
Lager 1
Lager 2
Lager 3

För att kunna lägga element på varandra så måste varje element ha en deklarerad position.
Z-index fungerar inte om du inte också specificerar dess position: absolute; eller position: relativ;
#lager1 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  background-color: #fff;
}

#lager2 {
  z-index: 2;
  position: relative;
  width: 150px;
  height: 350px;
  top: 15px;
  left: 20px;
  background-color: #999;
}

Denna fungerar inte
#lager3 {
  z-index: 2;
  width: 150px;
  height: 350px;
  top: 15px;
  left: 20px;
  background-color: #333;
}
Ett element kommer framför andra element när dess z-indexvärde ökar. Z-index fungerar dock inte med position:static.

Position default

Arbetar du med stylesheets har du med all säkerhet tidigare träffat på relative, absolute och float.
Utgångsläget i flödet för en webbsida där ingen cssdefinition har angetts är ett så kallat statiskt läge – också benämnt som default (grundläge).

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ödets grundläge 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 – bottom-lägen i förhållande till hur det normalt skulle ha positionerats i läget default.

Position:relative betyder att blockets relativa position enbart handlar om blockets förhållande till sig själv. En block i läget default, det vill säga att den är statisk utan angiven positionering, lägger sig alltid åt vänster och högst upp till vänster.

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.

Hej, jag är inte positionerad och intar därför position:static automatiskt. 
#div1 {
background-color:#ccc;
width:300px;
}

Som ni ser har jag inte angivit några fler cssdefinitioner ä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 andra 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 har ändrats.

Boxen ligger i läget position:relative – och har positionerats 20px från top samt 20px från left.

Så här kan det se ut med position:relativ och med ”hjälpegenskaperna” top och left. 
#div1a {
position:relative;
top:20px;
left:20px;
background-color:#ccc;
width:300px;
}

I klartext innebär detta att om du har ändrat boxens position med 20 px 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.

Det här beror på att boxens yta fortfarande tar upp samma plats som i defaultläget.

Vi har en box på 300 pixlars höjd och bredd. Till det plussar vi 20 pixlar på bredden och höjden. Med andra ord är den totala ytan nu 320 pixlar bred och hög.

Position:relative

Eftersom det tomma utrymmet omfattar boxens yta kan vi inte heller placera något annat där, förutom med z-index och negativt värde.

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

Ett blockelement i absolut positionerat läge är 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.

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.

See the Pen
Relative Children by Chris Coyier (@chriscoyier)
on CodePen.

För att inte bryta designen har jag lånat denna CodePen: Relative Children av Chris Coyier (@chriscoyier) som på ett bra sätt illustrerar position:absolute.

Nu pratar vi om placering av ett lager på en exakt plats. Med position:absolute kan man alltså lägga fler lager ovanpå varandra. Men det finns en problematik med position:absolute.

Lager position:absolut utan angiven bredd

Ett lager i position:absolute som inte har någon angiven bredd inställd beter sig lite konstigt. Bredden på lagret blir nämligen bara så bred som innehållets bredd.

Om lagret bara innehåller ett enda ord blir den bara så bred som ordet. Lägger du till två ord så kommer lagret endast att växa sig två ord bredare. Så här kommer det att fortgå ända tills lagret är 100% av föräldrarnas bredd (närmaste förälder med relativ positionering eller webbläsarfönster).

Det finns också en risk för att divblocket inte intar sitt exakta läge om du har en responsiv/fluid design i procent utan fast bredd.

Float – clear:float och clearfix:after

Float betyder flyter. 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 omgä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 område så inte andra element påverkas. Därför lägger man till clear.

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 placeras omedelbart efter koden för det flytande elementet.

<div class="clear"></div>
Det går också bra att infoga csskoden för clearmärkningen allra först i csskoden i 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;}

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.

Denna box är ställd i läget float:left; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Denna box är också ställd i läget float:left; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s 
#float1 {
float:left;
width:350px;
background-color:#ccc;
padding:10px;
}
#float2 {
float:left;
width:350px;
background-color:#aaa;
padding:10px;
}

Väljer vi däremot att lägga ett varsitt divblock i left respektive right float position kommer de att söka sig mot respektive kant.

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

HTML-koden

#leftfloat {
margin:1rem 0;
float:left;
padding:10px;
width:250px;
background-color:#ccc;
}
#rightfloat {
margin:1rem 0;
float:right;
padding:10px;
width:250px;
background-color:#aaa;
}

CSS

.clear {clear:both;}

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.

Box i positionen float utan angiven bredd

Precis som jag tidigare skrev om position:absolut utan angiven bredd så har positionen float samma exakta beteende som med flytande element utan bredder.

Boxen är bara så bred som den måste vara för att rymma innehållet, upp till så bred som dess överordnade element (behöver dock inte placeras relativt).

På grund av detta kan vi inte helt förlita oss på dessa boxar utan angiven bredd i uppbyggnaden av den övergripande sidlayouten.

Om du till exempel skapar en flytande kolumn som sidofält/sidebar och sedan utgår från att något element inuti (ex citat, bild) ska vara där för att bibehålla bredden, då lär du att få problem.

Inline elements är också boxar

Vi lägger ofta fokus på boxar som element på blocknivå. Det är lika lätt att tänka att element på blocknivå är boxar.

Inline element är också boxar.

Tänk istället på display:inline som smala rektanglar vilka omsluter varje rad. De kan ha margin, padding och border precis som alla andra boxar. En vänster-marginal skjuter boxen åt till höger, men bara den första raden eftersom det är början på boxen.

Paddingen appliceras ovan och under texten som den borde vara, och när den omsluts ignoreras raden ovanför paddingen och börjar där linjens höjd är tänkt att den ska börja.

Se sedan hur display:inline; positioneras i jämförelse med display:inline-block och display:block;

Position display:inline

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.

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 {
float:left;
padding:10px;
}
.clear{ clear:both;}
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.

Även här har jag valt att inte ange 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!

#textfloatright {
float:right;
padding:10px;
}
.clear{ clear:both;}
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 var ju ett lager du kunde placera som flera lager ovanpå varandra. Det minns du nu.

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