3.1 position: relative
Relative Positionierung in CSS ermöglicht es, Elemente relativ zu ihrer ursprünglichen Position im Dokumentfluss zu verschieben. Bei Verwendung von position: relative behält das Element seinen Platz im normalen Fluss, kann aber mit den Eigenschaften top, right, bottom und left verschoben werden. Diese Eigenschaften erlauben es dir, das Element relativ zu seiner ursprünglichen Position zu verschieben.
Grundprinzipien der relativen Positionierung
Bei relativer Positionierung (position: relative) wird das Element von seiner ursprünglichen Position im Dokumentfluss verschoben. Diese Verschiebung betrifft nur das Element selbst, andere Elemente bleiben an ihren Positionen, als ob das Element nicht verschoben wäre. Dadurch können Effekte entstehen, bei denen Elemente sich überlappen oder zusätzliche visuelle Abstände erzeugen.
Syntax:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Wo:
top: verschiebt ein Element nach unten relativ zu seiner normalen Positionright: verschiebt ein Element nach links relativ zu seiner normalen Positionbottom: verschiebt ein Element nach oben relativ zu seiner normalen Positionleft: verschiebt ein Element nach rechts relativ zu seiner normalen Position<Wert>: kann ein beliebiger gültiger Längenwert in CSS sein (px,%,emusw.)
3.2 Die Eigenschaft top
Die Eigenschaft top verschiebt ein Element nach unten relativ zu seiner ursprünglichen Position.
Anwendungsbeispiel von top:
.relative-top {
position: relative;
top: 20px; /* Verschiebt das Element um 20 Pixel nach unten */
}
Anwendungsbeispiel:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Das ist ein normaler Block</div>
<div class="box relative-top">Dieser Block wird um 20px nach unten verschoben.</div>
<div class="box static-box">Das ist ein normaler Block</div>
</div>
3.3 Die Eigenschaft right
Die Eigenschaft right verschiebt ein Element nach links relativ zu seiner ursprünglichen Position.
Anwendungsbeispiel von right:
.relative-right {
position: relative;
right: 20px; /* Verschiebt das Element um 20 Pixel nach links */
}
Anwendungsbeispiel:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Das ist ein normaler Block</div>
<div class="box relative-right">Dieser Block wird um 20px nach links verschoben.</div>
<div class="box static-box">Das ist ein normaler Block</div>
</div>
3.4 Die Eigenschaft bottom
Die Eigenschaft bottom verschiebt ein Element nach oben relativ zu seiner ursprünglichen Position.
Anwendungsbeispiel von bottom:
.relative-bottom {
position: relative;
bottom: 20px; /* Verschiebt das Element um 20 Pixel nach oben */
}
Anwendungsbeispiel:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Das ist ein normaler Block</div>
<div class="box relative-bottom">Dieser Block wird um 20px nach oben verschoben.</div>
<div class="box static-box">Das ist ein normaler Block</div>
</div>
3.5 Die Eigenschaft left
Die Eigenschaft left verschiebt ein Element nach rechts relativ zu seiner ursprünglichen Position.
Anwendungsbeispiel von left:
.relative-left {
position: relative;
left: 20px; /* Verschiebt das Element um 20 Pixel nach rechts */
}
Anwendungsbeispiel:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Das ist ein normaler Block</div>
<div class="box relative-left">Dieser Block wird um 20px nach rechts verschoben.</div>
<div class="box static-box">Das ist ein normaler Block</div>
</div>
3.6 Interaktion mit benachbarten Elementen
Elemente mit position: relative bleiben im normalen Dokumentfluss, was bedeutet, dass sie weiterhin den Platz einnehmen, den sie hätten, wenn sie nicht verschoben wären. Dadurch können Elemente verschoben werden, ohne das Layout anderer Elemente auf der Seite zu verändern.
Anwendungsbeispiel:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Element 1 (nach unten verschoben)</div>
<div class="box box2">Element 2 (nach rechts verschoben)</div>
<div class="box">Element 3 (normale Position)</div>
</div>
Erklärung zum Code:
-
.box1: Das Element wird um 20 Pixel nach unten verschoben, aber sein Platz im normalen Fluss bleibt erhalten. Das bedeutet, dass andere Elemente relativ zu seiner ursprünglichen Position angeordnet werden. -
.box2: Das Element wird um 20 Pixel nach rechts verschoben, aber sein Platz im normalen Fluss bleibt erhalten.
GO TO FULL VERSION