Absolute positionering zonder coördinaten in CSS
Het is eigenlijk niet verplicht om coördinaten op te geven bij absolute
positionering. Als een element simpelweg position met de waarde
absolute krijgt, dan wordt het absoluut gepositioneerd,
maar blijft het op dezelfde plek staan waar het
stond. Tegelijkertijd zullen alle andere elementen
zich gedragen alsof ons element er niet is
en kunnen eroverheen vallen.
Laten we naar voorbeelden kijken.
Voorbeeld
Laten we om te beginnen drie blokken maken zonder positionering en er tussenin wat tekst:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Laten we nu absolute toevoegen aan het groene blok.
Als gevolg blijft dit blok op zijn plek,
maar alle elementen eronder zullen zich gedragen
alsof ons element er niet is en eroverheen vallen:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Laten we nu de eigenschap left toevoegen,
zonder verticale positie toe te voegen. Als gevolg
zal ons blok horizontaal op de opgegeven
waarde komen, en verticaal - blijven staan
waar het stond:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* voegen horizontale positie toe */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Voorbeeld
Laten we nu, omgekeerd, de eigenschap
top toevoegen, zonder horizontale positie toe te voegen.
Als gevolg zal ons blok verticaal
op de opgegeven waarde komen, en horizontaal -
blijven staan waar het stond:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* voegen verticale positie toe */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
