CSS Absoluut Positie
- Vorige Pagina CSS Relatieve Positie
- Volgende Pagina CSS Drijven
De box van het element dat is ingesteld op absolute positie wordt volledig verwijderd uit de documentstroom en wordt gepositioneerd ten opzichte van zijn inheemse blok, wat kan zijn een ander element in het document of de initiële inheemse blok. De ruimte die het element oorspronkelijk inneemt in de normale documentstroom wordt gesloten, net alsof het element oorspronkelijk niet bestond. Na het positioneren wordt een blokkast gecreëerd, ongeacht het type kast dat het oorspronkelijk in de normale stroom genereerde.
CSS Absoluut Positie
Absolute positie maakt de positie van het element onafhankelijk van de documentstroom, dus het neemt geen ruimte in. Dit is anders dan relatieve positie, want relatieve positie wordt eigenlijk gezien als een onderdeel van het reguliere stroompositiesmodel, omdat de positie van het element ten opzichte van zijn positie in de reguliere stroom wordt bepaald.
De layout van andere elementen in de reguliere stroom lijkt alsof de absolute positie niet bestaat:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
Zoals we kunnen zien in het volgende afbeelding:
De positie van de elementen met absolute positie is relatiefDichtstbijzijnde geplaatste ouderals het element geen geplaatste ouder heeft, dan is zijn positie relatiefOorspronkelijke inheemse blok.
Het belangrijkste probleem bij het positioneren is om het belang van elk type positioneren te onthouden. Dus, laten we nu een overzicht maken van wat we hebben geleerd: relatieve positie is 'relatief' ten opzichte van de oorspronkelijke positie van het element in het document, terwijl absolute positie 'relatief' is ten opzichte van de dichtstbijzijnde geplaatste ouder, als er geen geplaatste ouder bestaat, dan 'relatief' ten opzichte van de oorspronkelijke inheemse blok.
Opmerking:Afhankelijk van de gebruikersagent, kan de oorspronkelijke inheemse blok mogelijk een canvas of HTML-element zijn.
Tip:Omdat de dozen van de absolute positie niet betrokken zijn bij de stroom van het document, kunnen ze andere elementen op de pagina bedekken. Dit kan worden bereikt door z-index EigenschapOm de volgorde van de stacking van deze dozen te controleren.
CSS Absoluut Positie Voorbeeld
- Positie: Absoluut Positie
- Dit voorbeeld demonstreert hoe je elementen kunt positioneren met behulp van absolute waarden.
- Vorige Pagina CSS Relatieve Positie
- Volgende Pagina CSS Drijven
