Position

Wat ga je leren?

Met position houd je een element op een vaste plek op het scherm, of schuif je het op ten opzichte van zijn eigen plek of van zijn ouder.

Theorie

Elk HTML-element heeft standaard position: static — het staat op zijn natuurlijke plek in de tekstvolgorde. Met de CSS-eigenschap position kun je dat veranderen, en met top, right, bottom, left schuif je het element.

De vier waarden

Waarde	Wat het doet
static	Standaard — staat op zijn natuurlijke plek
relative	Schuift t.o.v. zijn eigen oorspronkelijke plek
absolute	Schuift t.o.v. zijn dichtstbijzijnde ouder met position: relative
fixed	Blijft op een vaste plek in het browservenster, ook bij scrollen

relative — schuif vanaf eigen plek

.kaart {
  position: relative;
  top: 20px;      /* 20px omlaag */
  left: 10px;     /* 10px naar rechts */
}

Het element blijft ruimte innemen op zijn oude plek, maar wordt visueel verschoven.

absolute — schuif vanaf de ouder

absolute haalt het element uit de tekstvolgorde. Het wordt geplaatst ten opzichte van de dichtstbijzijnde ouder met position: relative (of het document zelf):

.container {
  position: relative;     /* container = referentie */
}

.badge {
  position: absolute;
  top: 0;
  right: 0;               /* hoekje rechtsboven van de container */
}

fixed — blijf op het scherm staan

fixed is als absolute, maar dan ten opzichte van het browservenster. Handig voor cookie-banners en sticky headers:

.scroll-knop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Predict

Wat denk je dat er gebeurt als je een element position: relative geeft met top: 30px — wordt de plek waar hij stond opgevuld door het volgende element, of blijft die leeg?

Klik hier voor het antwoord

De oude plek blijft leeg. relative schuift het element visueel, maar laat de ruimte in de tekstvolgorde gereserveerd — het volgende element schuift dus niet op. Bij absolute is dat anders: dan wordt de oude plek wél opgevuld.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verwijder position: relative van .kaart. Waar staat de badge nu?
   Antwoord

   Rechtsboven in het voorbeeld, tegen de rand van de pagina. Een element met position: absolute meet vanaf de dichtstbijzijnde ouder die zelf een position heeft. Zonder relative op .kaart is dat de pagina.
2. Voeg top: 50px toe aan .kaart. Wat gebeurt er, en blijft de plek erboven leeg?
   Antwoord

   De kaart schuift 50px omlaag, en de badge schuift mee, want die hangt aan de kaart. De plek waar de kaart stond blijft leeg: relative verschuift alleen wat je ziet, de ruimte blijft gereserveerd.
3. Verander position: absolute van .badge naar fixed. Wat zie je als je scrolt? Typ eerst een paar extra <p>'s, zodat er iets te scrollen valt.
   Antwoord

   De badge staat rechtsboven in het voorbeeld en blijft daar staan als je scrolt. fixed meet vanaf het venster, niet vanaf de kaart.
4. Vervang top: 0; right: 0; van de badge door bottom: 0; left: 0;. Waar komt hij?
   Antwoord

   Linksonder in de kaart. bottom en left meten vanaf de onderkant en de linkerkant van de kaart. Laat je top en right ernaast staan, dan trekt de badge naar alle vier de randen en bedekt hij de hele kaart.

Editor laden...

Modify

Opdracht: Maak van de badge een rondje (gebruik border-radius) in de linkerbovenhoek van de kaart.

Editor laden...

Tip

Verander de top/right naar top/left, en voeg border-radius: 50% toe met een vaste width en height.

Antwoord

.badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: red;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Make

Opdracht: Maak een "Terug naar boven"-knop die rechtsonder in het venster blijft staan terwijl je scrollt. Klikken hoeft (nog) niets te doen.

Editor laden...

Tip

position: fixed zorgt dat de knop in het venster blijft kleven. Gebruik bottom en right om hem in de hoek te zetten.

Antwoord

<button class="terug-boven">↑ Boven</button>

<!-- Vul de pagina met extra content om scroll mogelijk te maken -->
<p>Lange tekst...</p>

.terug-boven {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Er gaat iets mis

position: absolute zonder ouder met relative

/* .kaart heeft GEEN position: relative */
.kaart {
  border: 1px solid black;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;  /* eindigt rechtsboven in het scherm, niet in de kaart! */
}

absolute zoekt naar de dichtstbijzijnde ouder met een position (anders dan static). Zonder die ouder valt hij terug op het document zelf — en dan ga je je element waarschijnlijk niet zien op de plek waar je het wil. Vergeet niet position: relative op de container te zetten.