Bij het ontwikkelen van moderne webbronnen komen we altijd de volgende taken tegen: beschrijvende tekst tonen boven de productkaart; een pop-upbericht openen; een modaal venster weergeven en natuurlijk het handig tonen van het mobiele menu. Om al deze doelen te bereiken, gebruiken we de eigenschap position.

position: static | relative | absolute | fixed | sticky

De eigenschap position wordt gebruikt om de positionering van een element aan te passen. Standaard hebben alle elementen position: static. Zodra een andere waarde aan de eigenschap position wordt toegekend, kunnen ook de eigenschappen top, left, right en bottom worden gebruikt om een element naar wens te positioneren. We zullen ze allemaal verder bespreken.

Standaard documentstroom

De standaard documentstroom beschrijft hoe elementen op een webpagina worden gepositioneerd zonder dat er specifieke positioneringsinstructies zijn toegepast. Elementen worden gerangschikt in de volgorde waarin ze in de HTML-markering voorkomen.

Opmerking

Het is aanbevolen om alle elementen binnen de standaard documentstroom te houden, behalve in situaties waarin positionering noodzakelijk is voor decoratieve doeleinden of om specifieke functionaliteiten te realiseren, zoals pop-ups, modale vensters, dropdownmenu's, mobiele menu's, enzovoort.