position

Met het oog op meer complexere layouts, zullen we de position property gaan bekijken. Het heeft een aantal verschillende waardes, de naamgeving is niet altijd even duidelijk en intuïtief en zijn soms moeilijk te onthouden. We gaan ze één voor één behandelen, dus wellicht is het verstandig om deze pagina te bookmarken.

static

.static {
  position: static;
}

static is de standaard waarde. Een element met position: static; is niet op een speciale manier gepositioneerd. Een static element gaat onder de noemer niet gepositioneerd in tegenstelling tot een element met een andere waarde die als gepositioneerd wordt bestempeld.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative gedraagt zich hetzelfde als static tenzij je nog een aantal extra properties opneemt.

</div>

Het zetten van de top, right, bottom, en left properties van een relative gepositioneerd element zal ervoor zorgen dat de positie aangepast wordt ten opzichte van zijn originele positie. Andere content zal niet aangepast worden om te zien of dit in de overgebleven ruimte past.

</div>

fixed

Hallo! Nog geen aandacht aan me besteden.

</div>

Een fixed element is relatief gepositioneerd ten opzichte van de viewport, wat inhoud dat dit element altijd op dezelfde plek staat ongeacht of de pagina wordt gescrold. Net als met relative worden de top, right, bottom, en left properties gebruikt.

Ik ben er zeker van dat het fixed element in de hoek rechtsonder van de pagina niet onopgemerkt is gebleven. Hierbij krijg je toestemming om ernaar te kijken. Hieronder de CSS om dit te bewerkstelligen:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Een fixed element laat geen ruimte achter in de pagina waar het normaal gesproken zou hebben gestaan.

Mobiele browsers hebben verrassend genoeg erg wankele support voor de fixed property. Leer hier meer over deze situatie.

absolute

absolute is de lastigste waarde voor position. absolute gedraagt zich net als fixed behalve deze relatief tot de dichtsbijzijnde gepositioneerde voorouder element in tegenstelling tot relatief in de viewport. Als een absolute gepositioneerd element geen gepositioneerde voorouders heeft, dan wordt de document body gebruikt en zal het mee scrollen met de pagina. Voor de duidelijkheid, een "positioned" element is een element wiens positie alles is behalve static.

Hier is een eenvoudig voorbeeld:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Dit element is relative gepositioneerd. Als dit element position: static; was, zou het absolute gepositioneerde kind ontsnappen en relatief gepositioneerd worden ten opzichte van de document body.

Dit element is absolute gepositioneerd. Het is relatief gepositioneerd ten opzichte van zijn parent.

</div>

Het is lastige materie, maar wel essentieel voor het maken van grote CSS layouts. Op de volgende pagina gebruiken we position in een meer praktisch voorbeeld.

Vorige Volgende