Position: Relativ
durch „Position: relativ" kann man Elemente relativ zu ihrer Default-Position verschieben – die Stelle, an der sich zuvor das Element befand, wird dabei nicht geschlossen!
Online-Demo
HTML
<section class="container">
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
<figure class="box-3">Box 3</figure>
<figure class="box-4">Box 4</figure>
</section>CSS
.container {
background: #7a7a7a;
}
figure {
background: #336699;
border: 1px solid white;
height: 70px;
width: 500px;
margin: 5px;
}
.box-2 {
/* box-2 wird um 80px nach rechts und 60px nach oben verschoben */
position: relative;
left: 80px;
top: -60px;
}
.box-4 {
/* box-4 wird nur um 40px nach rechts verschoben */
position: relative;
left: 40px;
}CodePen
See the Pen position_relative by Matthias Edler-Golla (@megolla) on CodePen.