Absolute Positionering in CSS
Het gebruik van absolute positionering verwijdert het element uit de standaard documentstroom, waardoor andere naburige elementen de vrijgekomen ruimte kunnen opvullen. De top, left, bottom en right positioneringswaarden van het element worden berekend ten opzichte van het dichtstbijzijnde voorouder-element met een niet-statische positionering. Als er geen dergelijke voorouder is, worden de waarden bepaald op basis van de randen van het <body>-element.
position: absolute;
In het algemeen wordt absolute positionering vaak gecombineerd met relatieve positionering, omdat het nodig is een element te positioneren ten opzichte van een ander element in de documentstroom.
Bekijk het volgende voorbeeld. De opdracht is om de stadsnaam (een <span>-element met de klasse description) in de rechterbovenhoek van de stadkaart (een <div>-element met de klasse card) te plaatsen. Let op de positionerings-eigenschap voor de verschillende elementen.
index.html
index.css
In dit voorbeeld worden de .description-elementen absoluut gepositioneerd binnen de .card-elementen, dankzij de toegepaste position: relative; op de .card. Deze positionering plaatst de stadsnamen in de rechterbovenhoek van elke kaart.
Het is mogelijk om het element ten opzichte van een ander element te verplaatsen. Hoe werkt dit? Het is noodzakelijk om position: relative; toe te passen op het element dat de voorouder is van het element dat absoluut gepositioneerd moet worden. In een ander geval wordt het element gepositioneerd ten opzichte van het <body>-element.
Opmerking
Wanneer de eigenschappen
top,left,rightenbottomworden gespecificeerd voor het absoluut gepositioneerde element, berekent de browser deze vanaf de randen van het relatief gepositioneerde element. Dit kan worden gezien als het toepassen van een marge op het kindelement binnen het ouderelement.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Absolute Positionering in CSS
Veeg om het menu te tonen
Het gebruik van absolute positionering verwijdert het element uit de standaard documentstroom, waardoor andere naburige elementen de vrijgekomen ruimte kunnen opvullen. De top, left, bottom en right positioneringswaarden van het element worden berekend ten opzichte van het dichtstbijzijnde voorouder-element met een niet-statische positionering. Als er geen dergelijke voorouder is, worden de waarden bepaald op basis van de randen van het <body>-element.
position: absolute;
In het algemeen wordt absolute positionering vaak gecombineerd met relatieve positionering, omdat het nodig is een element te positioneren ten opzichte van een ander element in de documentstroom.
Bekijk het volgende voorbeeld. De opdracht is om de stadsnaam (een <span>-element met de klasse description) in de rechterbovenhoek van de stadkaart (een <div>-element met de klasse card) te plaatsen. Let op de positionerings-eigenschap voor de verschillende elementen.
index.html
index.css
In dit voorbeeld worden de .description-elementen absoluut gepositioneerd binnen de .card-elementen, dankzij de toegepaste position: relative; op de .card. Deze positionering plaatst de stadsnamen in de rechterbovenhoek van elke kaart.
Het is mogelijk om het element ten opzichte van een ander element te verplaatsen. Hoe werkt dit? Het is noodzakelijk om position: relative; toe te passen op het element dat de voorouder is van het element dat absoluut gepositioneerd moet worden. In een ander geval wordt het element gepositioneerd ten opzichte van het <body>-element.
Opmerking
Wanneer de eigenschappen
top,left,rightenbottomworden gespecificeerd voor het absoluut gepositioneerde element, berekent de browser deze vanaf de randen van het relatief gepositioneerde element. Dit kan worden gezien als het toepassen van een marge op het kindelement binnen het ouderelement.
Bedankt voor je feedback!
