Absolute Positionierung ohne Koordinaten in CSS
Tatsächlich ist die Angabe von Koordinaten bei absoluter
Positionierung nicht zwingend erforderlich. Wenn einem Element
einfach position mit dem Wert
absolute zugewiesen wird, wird es absolut positioniert,
bleibt aber an der gleichen Stelle stehen, an der es
sich befand. Alle anderen Elemente verhalten sich dann so,
als ob unser Element nicht vorhanden wäre
und können es überlappen.
Schauen wir uns das an Beispielen an.
Beispiel
Lassen Sie uns zunächst drei Blöcke erstellen ohne Positionierung und zwischen ihnen etwas Text:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<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;
}
:
Beispiel
Jetzt weisen wir dem grünen Block absolute zu.
Als Ergebnis bleibt dieser Block an Ort und Stelle,
während sich alle Elemente darunter so verhalten,
als ob unser Element nicht existiert, und es überlappen:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<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;
}
:
Beispiel
Jetzt fügen wir die Eigenschaft left hinzu,
ohne eine vertikale Position anzugeben. Als Ergebnis
wird unser Block horizontal an der angegebenen
Position ausgerichtet, während er vertikal an der
Stelle bleibt, an der er sich befand:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* horizontale Position hinzufügen */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Beispiel
Lassen Sie uns nun umgekehrt die Eigenschaft
top hinzufügen, ohne eine horizontale Position anzugeben.
Als Ergebnis wird unser Block vertikal
an den angegebenen Wert gesetzt, während er horizontal -
an der Stelle bleibt, an der er sich befand:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* vertikale Position hinzufügen */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
