CSS Posities

De eigenschap position geeft aan hoe een element op een pagina wordt gepositioneerd.

---

CSS position eigenschap

De eigenschappen voor positioneren maken het mogelijk om de plaats van elementen in een document nauwkeurig te bepalen. De elementen kunnen daarbij in lagen boven elkaar gestapeld worden. Bovendien kan aangegeven worden of elementen wel of niet zichtbaar moeten zijn.

Met de position eigenschap kan de positie bepaald worden, waar een HTML-element in het document moet worden weergegeven.

---

Verschillende methoden

Het op de juiste manier positioneren van elementen op een webpagina is belangrijk voor een goed ontwerp van de lay-out. Er zijn verschillende methoden in CSS die je kunt gebruiken voor het positioneren van elementen. In het volgende gedeelte worden deze methoden één voor één beschreven.

Er zijn vijf verschillende waarden die je kunt gebruiken:

position: static;

position: relative;

position: absolute;

position: fixed;

position: sticky;

Elementen worden vervolgens gepositioneerd met behulp van de eigenschappen top, bottom, left, en right. Deze eigenschappen werken echter alleen als de eigenschap position eerst is ingesteld.

Position: static

Elementen die de eigenschap position met de waarde static hebben, worden op dezelfde wijze weergegeven als normaal HTML. HTML elementen zijn standaard static gepositioneerd. Static gepositioneerde elementen worden niet beïnvloed door de eigenschappen top, bottom, left en right.

---

Position: relative

Elementen die de eigenschap position met de waarde relative hebben, wordt de plaats bepaald ten opzichte van de gebruikelijke positie van het element. Door de eigenschappen top, bottom, left en right voor een relative gepositioneerd element in te stellen, wordt het verplaatst vanaf zijn huidige positie. De ruimte die normaal gereserveerd is voor het element, verplaatst niet met het element mee.

Een element met de eigenschap position relative is gepositioneerd ten opzichte van zijn huidige positie.

Position: absolute

Een absolute gepositioneerd element wordt gepositioneerd ten opzichte van het eerste bovenliggende element. Door de eigenschappen top, bottom, left en right voor een absolute gepositioneerd element in te stellen, kan men deze verplaatsen. De ruimte die normaal gereserveerd is voor een absoluut gepositioneerd element, verplaatst met het element mee. Dit element kan echter andere elementen overlappen, absolute gepositioneerde elementen krijgen hun plaats zonder dat er rekening gehouden wordt met andere elementen.

---

Position: fixed

De waarde fixed is een variant op absolute. Het enige verschil is dat een fixed gepositioneerd element altijd op dezelfde plaats blijft, zelfs als de pagina wordt gescrold. Door de eigenschappen top, bottom, left en right voor een fixed gepositioneerd element in te stellen, kan men deze verplaatsen.

Position: sticky

Een element met de eigenschap position sticky wordt gepositioneerd op basis van de scrollpositie van de gebruiker. Een sticky element wisselt tussen relative en fixed, afhankelijk van de scrollpositie. Het wordt relative gepositioneerd totdat een bepaalde positie wordt bereikt in de browser dan blijft het op zijn plaats staan of plakken (zoals position: fixed).

Een sticky element wisselt tussen relative en fixed, afhankelijk van de scrollpositie.

---

Positionering van tekst

Voorbeeld hoe je tekst over een afbeelding plaatst:

---

---