A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign Positionieren, Media Queries Position: Relativ


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

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.