CSS Relatieve Positionering
- Vorige Pagina CSS Positionering Overzicht
- Volgende Pagina CSS Absoluut Positioneren
De kader van het element dat relatief gepositioneerd is, zal een afstand verplaatsen. Het element blijft de vorm behouden die het had voordat het gepositioneerd werd, en de ruimte die het oorspronkelijk innam, blijft behouden.
CSS Relatieve Positionering
Relatieve positionering is een zeer eenvoudig concept te begrijpen. Als je een element relatief positioneert, zal het verschijnen op de plek waar het zich oorspronkelijk bevindt. Vervolgens kun je de verticale of horizontale positie instellen om dit element 'relatief' ten opzichte van zijn startpunt te verplaatsen.
Als je top instelt op 20px, dan zal het kader zich 20 pixels onder de top van de oorspronkelijke positie bevinden. Als je left instelt op 30 pixels, dan zal er aan de linkerkant van het element een ruimte van 30 pixels worden gecreëerd, wat betekent dat het element naar rechts wordt verplaatst.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Zoals weergegeven in de volgende figuur:
Let op, bij het gebruik van relatieve positionering, neemt het element ongeacht of het wordt verplaatst, nog steeds de oorspronkelijke ruimte in. Daarom kan het verplaatsen van het element leiden tot het overlappen van andere kaders.
CSS 相对定位实例
- Positionering: Relatieve Positionering
- Dit voorbeeld demonstreert hoe je een element positioneert ten opzichte van zijn normale positie.
- Vorige Pagina CSS Positionering Overzicht
- Volgende Pagina CSS Absoluut Positioneren
