Negative Werte beim Positionieren in CSS
Die von uns gelernten Eigenschaften top, right,
bottom und left können nicht nur positive,
sondern auch negative Werte annehmen. Schauen wir uns das an Beispielen an.
Beispiel
Im folgenden Beispiel wird das Element absolut positioniert
relativ zu seinem Elternelement und befindet sich in der Position
0 von oben, 0 von links:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Beispiel
Und jetzt bewegen wir das Element in die Position
-20px von oben, -30px von links:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Im folgenden Beispiel befindet sich der grüne Block mittig
auf dem Bildschirm mittels margin, und
die roten Blöcke werden relativ zu ihm positioniert.
Wiederholen Sie die Seite gemäß
dem angegebenen Beispiel:
