Positionering

Sätt position med CSS

Hur placerar man ut ett element på hemsidan? För att svara på frågan måste vi först veta hur vi vill placera ut det. Element kan nämligen ha olika beteenden som reagerar annorlunda med omgivningen.

Relative, Absolute, Fixed & Static

Dessa variablar används för att ge HTML-element olika typer av beteenden som påverkar positionen. De skrivs i CSS som position: relative om elementet ska ha en relativ position. Sedan kan man positionera ut elementet med hjälp av top, right, bottom eller left.

Position Relative

Med position: relative utgår man från den nuvarande positionen när man ska positionera ut elementet.

.relativtBlock{
  position: relative;
}

Position Absolute

Med position: absolute utgår man från områdets absoluta nollpunkt, vilket är vänstra hörnet av området som elementet ligger inom.

.absolutBlock{
  position: absolute;
}

Position Fixed

position: fixed har samma värden som absolute, förutom att den följer med när man scrollar i webbläsaren.

.fixeratBlock{
  position: fixed;
}

Position Static

position: static nollställer alla värden, det är variabeln som alla element har innan man har valt något.

.statisktBlock{
  position: static;
}

Placera ett element bredvid ett annat

float är attributet du behöver för att placera ett element bredvid ett annat i CSS. Du kan bestämma om elementet ska flyta till vänster eller höger. I det här exemplet så har vi två element, ett för content och ett för sidebar.

<div class="content">
  <h1>Startsida</h1>
  <p>Välkommen till min hemsida!</p>
</div>

<div class="sidebar">
  <strong>Meny till höger</strong>
</div>
.content{
  position: relative;
  float: left;
}

.sidebar{
  position: relative;
  float: left;
}

Startsida

Välkommen till min hemsida!

Meny till höger

Startsida

Välkommen till min hemsida!

Meny till höger

Avsluta en float

Om du inte avslutar floaten kommer elementen efter dessa att malplaceras och hamna fel. Placera därför båda elementen inom ett annat element som har attributet overflow: hidden. Alternativt lägger du en div efter de båda elementen som attributet clear: both.

<div style="overflow: hidden;">

  <div class="left">
  </div>

  <div class="right">
  </div>

</div>
<div class="left">
</div>

<div class="right">
</div>

<div style="clear: both;"></div>

Display: Inline, Block och Inline-block

Element som agerar som block (tex div) beter sig annorlunda jämfört med text (tex span). Det beror på att de har olika display-inställningar. Man kan själv sätta display-inställning på ett block genom attributet display: inline / block / inline-block

Inline-element

Inline-element har följande som standard.

  • Fyller ut området beroende på innehållet.
  • Ignorerar top och bottom i margin, men funkar med left och right, samt padding.
  • Följer med i text-innehåll utan att byta rad.
  • Ignorerar width och height.
  • Kan positioneras med hjälp av text-align.
  • Kan positioneras med hjälp av vertical-align.

Exempel på inline-element <a>, <span>, <strong> och <em>.

Block-element

Block-element har följande som standard.

  • Om ingen bredd är satt, fylls området ut till 100%.
  • Kan ha margin och padding.
  • Placeras på en ny rad efter tidigare element, om ingen float är angiven.
  • Kan inte positioneras med hjälp av text-align.
  • Kan inte positioneras med hjälp av vertical-align.

Exempel på block-element <p>, <div>, <form>, <header>, <nav>, <ul>, <li> och <h1>.

Inline-block-element

Inline-block tar vara på bådas egenskaper. Den klarar av margin och anpassar samtidigt bredden efter innehållet istället för 100%.

Exempel

I det här exemplet har vi tre stycken <span> med textinnehåll. Som du ser så tar inline inte hänsyn om marginaler inom content men kan däremot innehålla padding. Block lägger däremot marginaler utanför content och breddar ut sig på hela området. Inline-block tar vara på både block och inline och lägger marginaler inom content samtidigt samtidigt som den anpassar bredden utefter innehållet.

Inline
Block
Inline-block
<div class="content">
  <span class="inline">Inline</span>
</div>

<div class="content">
  <span class="block">Block</span>
</div>

<div class="content">
  <span class="inline-block">Inline-block</span>
</div>
.content{
  background: #000;
}

span{
  margin: 20px;
  padding: 8px 12px;
  background: #33abe2;
  color: #fff;
}

.inline{
  display: inline;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus