Absolute und relative Positionierung im Kontext

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Der position-Eigenschaft kann nur ein einziger, konstanter Wert zugewiesen werden. Dieser bestimmt, welchen Platz ein Bereich auf der Seite einnimmt. Die am häufigsten benutzten Werte der position-Eigenschaft sind absolute und relative. In der Grundeinstellung ist der Wert static definiert. Ein vierter möglicher Wert ist fixed. Dieser wird jedoch vom Internet Explorer nicht unterstützt.

Einem Element mit CSS einen genauen Platz auf der Seite zuzuweisen, ist nicht ganz unkompliziert, weil sich die referenzierten Punkte, mit denen die Lage eines Elements innerhalb der Seite bestimmt wird, auf den Kontext des übergeordneten Elements beziehen und sich damit verändern können. Es gibt dafür kein für alle Elemente gültiges, unveränderliches Koordinatensystem, auch dann nicht, wenn die position-Eigenschaft den Wert absolute hat. Jedesmal, wenn ein Block irgendwo auf der Seite mit einem anderen Wert als static positioniert wird, wird für die darin enthaltenen Elemente ein neuer Positionierungskontext erzeugt. Die linke obere Ecke des umgebenden Blocks hat dann die Koordinaten (0,0). Wenn Sie also ein Element mit CSS innerhalb dieses Blocks positionieren, wird seine Position relativ zu diesem neuen Koordinatensystem, dem »Positionierungskontext«, berechnet.

Dieses Konzept kann am besten mit ein paar einfachen zusammenhängenden Beispielen veranschaulicht werden. Beginnen wir mit einer leeren Seite. In diesem Kontext sind die Ursprungskoordinaten (0,0) in der linken oberen Ecke des sichtbaren Bereichs im Browser. Von dort aus positionieren wir einen div-Bereich auf der Seite, der einen einfachen Text enthält. Das Ergebnis zeigt die folgende Abbildung.

Das erste Element auf einer leeren Seite positionieren

Abbildung: Das erste Element auf einer leeren Seite positionieren.

Hier kommt das HTML-Fragment, welches zu dem oben gezeigten Ergebnis führt. Mit den CSS-Eigenschaften top und left wird dem div-Bereich eine Position auf der Seite zugewiesen.

<div style="position: absolute; left: 125px; top: 75px;" class="big">Das hier ist die erste positionierte Textzeile.</div>

Nun positionieren wir einen weiteren div-Bereich, der dem ersten untergeordnet wird:

<div style="position: absolute; left:125px; top: 75px;" class="big">
  Das hier ist die erste positionierte Zeile.
  <div style="position: absolute; left: 25px; top: 30px;" class="big">
    Das ist die zweite Zeile.
  </div>
</div>

Positionierung eines untergeordneten Elements

Abbildung: Positionierung eines untergeordneten Elements.

Wie wir in der obigen Abbildung sehen, ist die zweite Textzeile, ausgehend von der ersten Textzeile, um 25 Pixel nach rechts gerückt. Für den zweiten div-Bereich zählt also nicht mehr der linke Rand der Seite als Ausgangspunkt, sondern der linke Rand des übergeordneten div-Bereichs. Dieser ist das Elternelement der zweiten Zeile und definiert den Positionierungskontext für das untergeordnete Element. Beide Bereiche sind absolut positioniert, für die erste Zeile ist jedoch die linke obere Ecke des Bildschirmfensters der Ursprung und für die zweite Zeile die linke obere Ecke des Elternelements. Es ist Ihnen bestimmt aufgefallen, dass der Schriftgrad der zweiten Zeile ziemlich groß ist. Warum das so ist? Schauen Sie sich die Stilregel der Klasse big an und Sie werden verstehen, warum:

.big {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
  font-weight: bold;
}

Da der zweite div ein Kindelement des ersten ist, wird auch seine Schriftgröße relativ zu der Schriftgröße des Elternelements berechnet. Die Stilregel legt die Schriftgröße mit 2em fest, was für den Browser heißt, dass er die Schrift doppelt so groß anzeigen soll, als er sie normalerweise anzeigen würde. Wenn die 2em-Regel auf die erste Zeile angewendet wird, erscheint sie somit in doppelter Größe. Wird sie aber auf die zweite Zeile angewendet, wird die Schriftgröße der ersten Zeile verdoppelt und der zweiten Zeile zugewiesen.

Mit einer absoluten Konstante für die Schriftgröße kann dieses Verhalten korrigiert werden:

.big {
  font-family: Helvetica, Arial, sans-serif;
  font-size: large;
  font-weight: bold;
}

Damit sollten die beiden div-Bereiche dieselbe Schriftgröße benutzen.

Unsere Seite besteht bisher aus zwei ineinander verschachtelten div-Elementen. Beide sind mit absoluten Werten auf der Seite positioniert. Nun fügen wir noch ein drittes Element hinzu, in diesem Fall ein span, das innerhalb des zweiten div-Bereichs untergebracht und darin mit einem relativen Wert positioniert wird. Der HTML-Code sieht folgendermaßen aus:

<div style="position: absolute; left: 125px; top: 75px;" class="big">
  Das ist die erste Zeile, die abdsolut positioniert wird.
  <div style="position: absolute; left: 25px; top: 30px;">
    Dies ist <span style="position: relative; left: 10px; top: 30px;">ein Beispiel für</span> eine zweite Zeile.
  </div>
</div>

Das Ergebnis dieses HTML-Fragments sehen Sie weiter unten. Es fällt auf, dass die zuletzt im <span>-Tag eingefügten Wörter »ein Beispiel für« unterhalb der zweiten Zeile und ein wenig nach rechts verschoben von ihrer originalen Position dargestellt werden. Eine Positionierung mit dem Wert relative nimmt als Ausgangspunkt immer die Koordinate, an der das Element ohne Positionierung stehen würde. Mit anderen Worten: Der Positionierungskontext eines relativ positionierten Elements wird von seiner normalen Position bestimmt. In unserem Beispiel wird das span-Element so dargestellt wie in der nächsten Abbildung – unterhalb und etwas nach rechts verschoben von der Position, an der es ohne Positionierung angezeigt würde. Diesen Fall zeigt die übernächste Abbildung.

Beispiel mit relativer Positionierung des span-Tags

Abbilddung: Beispiel mit relativer Positionierung des <span>-Tags.

Beispiel ohne Positionierung des span-Tags

Abbildung: Beispiel ohne Positionierung des <span>-Tags.

Die wichtigsten Regeln für die Positionierung von Elementen mit der position-Eigenschaft lassen sich so zusammenfassen: Die absolute Positionierung eines Elements wird immer am übergeordneten Element ausgerichtet. Die relative Positionierung eines Elements wird immer an der Stelle ausgerichtet, an der es sich ohne Positionierung befinden würde.

Machen Sie sich keine Sorgen, wenn Ihnen diese Konzepte noch ein wenig verwirrend vorkommen. Wenn wir unser Layout erstellen, werden wir lernen, wie sich das alles zusammenfügt.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg