Positionierung

Positionierung (position)

Die letzten beiden Teile dieses Tutorials beschäftigen sich mit der Positionierung von Elementen.

Nach dem Sie bisher die Möglichkeiten zur Veränderung des Aussehens, der Art und Ausrichtung von Element-Boxen kennen gelernt haben, geht es jetzt darum, wo diese Boxen auf der Webseite auftauchen. Bei der dieser Positionierung spielt der folgende Befehl eine zentrale Rolle.

Die obigen fünf Werte bedeuten dabei folgendes:

static

Die Element-Boxen werden wie gewohnt als Rechteck dargestellt.

relative

Die Element-Box wird innerhalb der Webseite um einen bestimmten Wert in eine Richtung verschoben. In der Webseite wird dann weiterhin der Platz, den die Element-Box benötigt reserviert und der andere Inhalt wird entsprechend verschoben. Um welchen Wert bzw. in welche Richtung die Box verschoben wird, legen die vier untenstehenden Befehle top, right, bottom und left fest.

absolute

Wird einer Element-Box mit Hilfe des Befehls position der Wert absolute zugewiesen, so wird innerhalb der Webseite kein Platz mehr für diese Box reserviert. Die Box liegt dann über den anderen Inhalten der Webseite. Zusätzlich zu den Angaben für top, right, bottom und left kann noch eine Angabe zur Breite (width) und Höhe (height) gemacht werden.

fixed

Bei der Angabe fixed wird die Box genauso wie beim Wert absolute dargestellt mit dem Unterschied, dass sie auch beim Scrollen ihre Position nicht verändert.

inherit

Bei diesem Wert erbt die Box die Eigenschaften der Elternbox.

Ausrichtung

Bei den Werten relative, absolute und fixed können Sie mit den folgenden Befehlen die Element-Box innerhalb des Dokumentes verschieben.

Prozentangaben beziehen sich bei right und left auf die Breite, bei top und bottom auf die Höhe des Elternelementes.

Die Angaben dürfen sowohl positiv als auch negativ sein, wobei Sie aufpassen müssen, dass Sie die Box oder Teile davon, nicht aus dem sichtbaren Bereich verschieben.

Der Wert static-position belässt das Element an derselben Stelle, an der auch das übergeordnete Element ist.

Breite und Höhe

Sie können die Breite und die Höhe der Element-Box mit den beiden folgenden Befehlen festlegen:

Da Sie oftmals vorher nicht wissen wie groß eine Box wird, da dieser Wert von verschiedenen Faktoren (z.B. Schriftart, -größe oder auch enthaltenen Bildern) abhängt, können Sie mit den nachstehenden Befehlen Mindest- bzw. Maximalgrößen für die Höhe und Breite festlegen.

Bei der Festlegung von Größen für Elementboxen besteht immer die Gefahr, dass der Inhalt größer als die Box selbst ist. CSS bietet an dieser Stelle einige Befehle, um das Verhalten bei einem sog. “Overflow” zu steuern.

Leider funktionieren die folgenden Befehle zum Overflow mit praktisch keinem Browser korrekt.

Overflow

Passt aus irgendeinem Grund der Inhalt nicht mehr in die für ihn bestimmte Elementbox, verwenden Sie den folgenden Befehl, um zu entscheiden, was mit dem überhängenden Inhalt geschehen soll.

Der Wert visible führt dazu, dass der zusätzliche Inhalt außerhalb seiner Elementbox dargestellt wird. Dies kann natürlich dazu führen, dass andere Elementboxen und deren Inhalt beeinflusst werden.

Bei hidden wird der zusätzliche Inhalt einfach “verschluckt” und ist für den Betrachter nicht mehr zu erreichen.

Bei der Angabe von scroll fügt der Browser der Elementbox einen Scrollbalken hinzu, wodurch die Größe der Box nicht beeinflusst wird, der Besucher aber dennoch die Möglichkeit hat, an den zusätzlichen Inhalt zu gelangen.

Auto führt dazu, dass der Browser selbst entscheidet, welches Overflow-Verhalten an der Stelle an sinnvollsten ist.

Overflow-clip

Mit dem Befehl overflow-clip können Sie selbst einen Bereich um die Elementbox festlegen, in dem sich zusätzlicher Inhalt der Elementbox befinden darf.

Der Wert auto steht dabei für die Größe der Elementbox. Die Clipping-Region ist demnach genauso groß wie die Elementbox.

Mit der Definition eines Rechteckes erreichen Sie bei der Angabe von positiven Werten eine Verkleinerung der Clipping-Region, bei negativen Werten eine Vergrößerung in die betreffende Richtung.

Clip

Der obige Befehl sieht auf den ersten Blick aus wie der overflow-clip, bedeutet aber dennoch etwas anderes.

Mit Hilfe dieses Befehls kann man durch positive Werte für das Rechteck, den Bereich einer Elementbox einschränken. Dabei bezieht sich das Clipping-Rechteck auf das gesamte Element an sich. So können Sie z.B. Bereiche eines Absatzes mit

 <P style="clip:rect(20px, auto, auto, auto);"> 

einfach abschneiden. Alles was von oben gesehen in den ersten 20 Pixeln steht, wird für den Betrachter unsichtbar.

Sichtbarkeit des Elements (visibility)

Wie der Name des Befehls schon erahnen lässt, können Sie bestimmte Elemente bewusst anzeigen bzw. verbergen lassen. Definieren Sie ein Element als unsichtbar (mit visibility: hidden), wird dennoch im Dokument Platz für den verborgenen Bereich reserviert.

Die dritte Dimension (z-index)

Nachdem Sie verschiedene Elementboxen auf einer Webseite positioniert haben, kommt es vor, dass sich verschiedene Boxen überlappen. Dabei stellt sich die Frage, welche Box welche überlappt.

Mit dem folgenden Befehl lässt sich eine dritte Dimension in die Webseite einführen. Sie geben an, in welcher Reihenfolge sich die Elemente überlagern.

Auto belässt die Entscheidung der Reihenfolge der Überlagerung beim Browser. Geben Sie jedoch ganze Zahlen an, werden Elemente mit einer niedrigen Zahl weiter in den Hintergrund gerückt und der höchste Wert liegt ganz oben. Dabei können Sie auch negative Zahlen benutzen.