Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

12.3 Versetzt weiterfließen: position: relative

Die relative Positionierung mit position: relative macht zwei Dinge:

  • Sie verschiebt die Box von ihrer normalen Position im Fluss.
  • Sie markiert den ursprünglichen Platz des Elements als geschützt.

Die anderen Elemente im Dokument verhalten sich so, als ob das Element noch an seinem ursprünglichen Platz im normalen Fluss steht. HTML und CSS werden für dieses Beispiel ein klein wenig geändert: 

 

HTML CSS
<body>
  <div id="anders">Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</body>
body {
  color: black;
  background-color: gray;
  padding: 0;
  margin:0;
}
div {
  width: 20%;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
#anders {
  position: relative;
  top: 25px;
  right: 25px;
  background-color: #f3c600;
}

Und hier das Ergebnis:

Abbildung 12.3:   Relative Positio nierung in Aktion
Abbildung 12.3: Relative Positionierung in Aktion

Beachten Sie, dass Box 2 und 3 sich überhaupt nicht verändern. Bei der relativen Positionierung bleibt die ursprüngliche Position des Elements wie gesagt geschützt und wird nicht von den nachfolgenden Elementen beansprucht. 

Ein positioniertes Element bekommt seine genauen Koordinaten mit den Eigenschaften top, right, bottom und left, die bei der relativen Positionierung von der ursprünglichen Position im Flow aus gemessen werden: 

  • top:25px drückt die Box nach unten. An der normalen Position der Box werden oben 25 Pixel eingefügt.
  • right:25px schiebt die Box nach links, sodass sie zum Teil verschwindet. An der ursprünglichen Position werden rechts 25 Pixel eingefügt.

Alle Angaben sind relativ zur ursprünglichen Position und geben an, wo der Wert eingefügt wird, und nicht, in welche Richtung die Box geschoben werden soll. Eigentlich logisch, aber position:relative wirkt auf den ersten Blick ein bisschen wie von hinten durch die Brust ins Auge.