In CSS (Cascading Style Sheets) worden positioneringsregels gebruikt om te bepalen waar elementen op de pagina worden geplaatst. Er zijn verschillende positioneringsschema’s, waaronder relatieve en absolute positionering.
1. Relatieve positionering: een element met relatieve positionering verplaatst zich ten opzichte van zijn normale positie in het document. Hierbij is de offset bepaald door het top, right, bottom, en left attribuut. Dit veroorzaakt geen andere elementen om hun positie te veranderen. Het oorspronkelijke ruimte dat het element in beslag nam blijft behouden.
Bijvoorbeeld, als u een element dat relatief is gepositioneerd een ‘top’ attribuut van 20 pixels geeft, zal het element omhoogschuiven vanaf zijn oorspronkelijke locatie en zal het 20 pixels van de bovenkant van de oorspronkelijke locatie zitten.
1. Absolute positionering: een element met absolute positionering wordt geplaatst ten opzichte van het dichtstbijzijnde gepositioneerde voorouder (in plaats van gepositioneerd ten opzichte van het viewport). Als er geen gepositioneerde voorouders zijn, wordt het element gepositioneerd ten opzichte van de pagina zelf.
Bijvoorbeeld, als u een element dat absoluut is gepositioneerd een ‘top’ attribuut van 20 pixels geeft, zal het element aan de bovenkant van het dichtstbijzijnde gepositioneerde voorouderelement zitten, of als er geen dergelijk element is, aan de bovenkant van de pagina. Absoluut gepositioneerde elementen kunnen andere elementen overlopen of doordrukken.
De keuze tussen relatieve en absolute positionering hangt af van het specifieke ontwerp en de lay-out die je probeert te bereiken. Beiden bieden verschillende niveaus van controle en flexibiliteit.
