Die CSS-Eigenschaft position

position gehört nicht zu den einfachsten CSS-Eigenschaften. An den Werten absolute und relative ist sicher der ein oder andere Entwickler schon verzweifelt. Die Komplexität der Eigenschaft position stellt jedoch ein leistungsstarkes Werkzeug dar. Als geübter Entwickler steht Ihnen damit ein kleines Zaubermittel zur Verfügung. Dieser Beitrag zeigt, wie position im Detail funktioniert, worin die Schwierigkeiten bestehen und wie Sie diese lösen können.

Standardwert von position: static

Der Eigenschaft position können vier mögliche Werte zuweisen werden:

• static (Standardwert)
• absolute
• relative
• fixed

Der Standardwert static ist dafür verantwortlich, dass alle HTML-Elemente im Browser nach einander dargestellt werden. Inline-Elemente wie zum Beispiel <strong> oder <span> werden aneinander gereiht. Block-Elemente wie <p> oder <div> führen in ihrer eigenen Defaulteinstellung zu einem Zeilenumbruch, nehmen ohne weitere Styles die verfügbare Breite ein und werden untereinander dargestellt.

Das mag sich banal anhören. Für das Verständnis der Eigenschaft position ist es jedoch hilfreich, sich diese Tatsache vor Augen zu führen. Der so genannte Elementfluss, das Ausspielen der HTML-Elemente von links nach rechts und oben nach unten, kann von der Eigenschaft position vollständig aufgehoben werden.

position wirkt erst in der Kombination mit top, right, bottom oder left

Die CSS-Eigenschaft position bewirkt eine Verschiebung von HTML-Elementen. Doch unabhängig davon, ob Sie absolute, relative oder fixed verwenden, position erfordert immer eine weitere CSS-Eigenschaft. Das Fähigkeit, dass Elemente positioniert werden können, »aktivieren« Sie mit position. Zusätzlich ist eine Definition erforderlich, wie weit und aus welcher Richtung die Verschiebung sein soll.

Hier ein Beispiel für eine vollständige CSS-Regel mit allen benötigten Deklarationen:

#box_2 {
   position: relative;
   top: 20px;
   left: 20px;
}

Der Wert absolute: Positionierung mit dem Holzhammer

Mit top: 0px und left: 0px liegt ein absolut positioniertes <div> in der linken oberen Ecke der Webseite. Mit top: 0px und right: 0px liegt es rechts oben in der Ecke. Eine Positionierung von unten aus ist ebenfalls möglich und benötigt einen bottom-Wert.

Mit konkreten Längenangaben schieben Sie ein <div> (oder auch andere HTML-Elemente) an die gewünschte Stelle. Bezugspunkt für die Positionierung ist zumeist das body-Tag. Unter welchen Bedingungen sich ein <div> nicht auf das body bezieht, lesen Sie weiter unten.

#box_1 {
   position: absolute;
   top: 1em;
   left: 1em;
   background-color: #FFAC80;
   width: 43em;
   height: 4em;
}
#box_2 {
   position: absolute;
   top: 8em;
   left: 1em;
   background-color: #FFB758;
   width: 10em;
   height: 16em;
}
#box_3 {
   position: absolute;
   top: 8em;
   left: 14em;
   background-color: #FFE874;
   width: 30em;
   height: 16em;
}

Über diesen CSS-Code sind drei <div>-Elemente mit bestimmten Breiten und Höhen versehen. Über die Eigenschaften position, top und left werden diese an bestimmte Stellen geschoben

So könnte ein klassischer Webseitenaufbau gestaltet werden. Falls Sie eine statische Seite aufbauen, bei der Sie die Länge aller Inhalte kennen, oder beispielsweise eine Diashow mit fest definierten Bildgrößen, ist ein solcher Seitenaufbau denkbar.

Der Elementfluss wird aufgehoben

Falls die Inhalte auf einer Seite in der Länge variieren, läuft man allerdings Gefahr, dass ein per absolute positioniertes HTML-Element andere überlagert. Wie oben angedeutet wird der Elementfluss per absolute komplett aufgehoben. Dieser Elementfluss ist nicht nur verantwortlich für die natürliche Reihenfolge der HTML- Elemente, sondern beinhaltet auch eine Platzhalterfunktion, sprich: die Fläche, welche das HTML-Element einnimmt, wird auch durch die eigenen Dimesionen bestimt. Dieses Verhalten geht ebenfalls verloren.

Diese Grafik zeigt die Ausspielung eines Quell­codes, in dem die Box 5 als einziges <div> nicht positioniert ist. Alle anderen sind wie oben per absolute positioniert. Die Box 5 verhält sich so, als sei sie das erste HTML-Element auf der Seite: Sie wird links oben dargestellt. Dass im Quelltext die vier anderen <div>-Elemente vor diesem <div> stehen, und dass das dritte <div> mit viel Text gefüllt ist, hat keinen Einfluss darauf, an welcher Stelle die Box 5 angezeigt wird. Auch das vierte <div> ist aus dem Elementfluss gelöst. Es orientiert sich absolute positi­oniert an der linken oberen Ecke der Seite. Auch hier hat der Text in dem <div> davor keinerlei Auswirkung auf die Positionierung der Box 4.

Umsortieren per z-index

In dieser Grafik sehen Sie, wie bedingungslos sich absolut positionierte <div>-Elemente über einander legen. Als grafische Spielerei sogar gut vorstellbar, laufen Sie bei der aktiven Positionierung immer Gefahr, dass sich verschiedene HTML-Elemente überlagern. Wichtige Links beispielsweise können überlagert werden und nicht mehr sichtbar sein. Für die Bedienbarkeit Ihrer Seite wäre das fatal!

Überlagerungen kann man entgegen wirken: CSS bietet die Eigenschaft z-index. Damit haben Sie die Möglichkeit, absolute positionierte Elemente in Ihrer Darstellungs­reihenfolge zu verändern.

#box_1 {
   position : absolute;
   z-index : 30;
}
#box_3 {
   position : absolute;
   z-index : 50;
}

Per z-index sortieren Sie die HTML-Elemente wie einen Stapel durchsichtiger Folien. Dabei werden die Werte in ganzen Zahlen angegeben, das Element mit dem höchsten z-index-Wert wird im Browser vorne angezeigt, das mit dem kleinsten hinten (wenn man bei einem Bildschirm von einer Tiefe sprechen darf). Das Ergebnis des CSS-Codes sehen Sie in der nebenstehenden Abbildung.

Negative Zahlen werden nicht interpretiert, mögliche Werte sind ausschließlich positive Ganzzahlen. Elemente ohne z-index liegen immer hinten.

Wenn Sie z-index verwenden, schreiben Sie die Werte in 10er oder 100er Schritten. Lassen Sie sich immer Platz zwischen zwei z-index-Angaben. Sie wissen nie, ob noch ein weiteres HTML-Element hinzukommt, das »dazwischen« geschoben werden soll. Wenn Sie die Werte 1, 2, 3 verwendet haben, sind Sie gezwungen, Ihr komplettes CSS umzuschreiben, falls zwischen den Elementen mit dem z-index 1 und 2 ein Element eingefügt werden muss.

z-index wirkt nur in Kombination mit position

Die CSS-Eigenschaft z-index wirkt nie eigenständig – sie benötigt immer eine position-Deklaration von absolute, relative oder fixed. Bei static für position (also auch, wenn kein position-Wert gesetzt ist und damit der Standardwert greift) wirkt z-index nicht. Falls Sie die Darstellungsreihenfolge von HTML-Elemente per z-index beeinflussen möchten, muss das relevante Element mindestens per position: relative konfiguriert sein.

Von absolute zu relative

In der Abbidlung links sehen Sie die Darstellung, nachdem die Positionierung von absolute auf relative umgestellt wurde. Nicht, dass das Entwickler einfach so tun würden. Doch es ist ein schöner Weg, um dem Verhalten von relative näher zu kommen. Die Elemente fliegen einem scheinbar um die Ohren.

Im der Abbildung rechts wird der Effekt der relativen Positionierung deutlicher: Box 1, 3 und 4 haben in diesem Beispiel keine Positionierung. Nur Box 2 ist definiert, und zwar mit dem Wert relative. Der Elementfluss ist nicht aufgehoben. Nur absolute und fixed heben die natürliche Reihenfolge komplett auf – bei relative bleibt der Elementfluss und auch die Platzhaltereigenschaft eines HTML-Elements erhalten. Trotzdem ist die Box 2 verrückt.

relative bedeutet, relativ zum Element selbst

relative bewirkt, dass ein Element von der Position aus verschoben wird, an dem es im normalen Elementfluss dargestellt würde.

Dabei scheint position: relative; left: 1em; fast dasselbe Verhalten zu bewirken wie margin-left: 1em oder padding-left: 1em. Bei allen drei Definitionen wird das Element um 1em nach rechts verschoben.

margin-left bzw. padding-left führt jedoch auch dazu, dass zu einer festgelegten Breite eines HTML-Elements der Abstand hinzukommt. Ein <div> mit einer Breite von 20em und einem linken Abstand von 1em nimmt folglich 21em ein. Das nächste HTML-Element wird um 1em weiter rechts dargestellt. margin und padding wirken sich immer auf den folgenden Elementfluss aus. Ein position: relative hat diesen Effekt nicht!

Wenn es darum geht, ein Icon etwas nach rechts zu schieben oder eine Überschrift ein paar Pixel höher darzustellen, ziehe ich derweil die relative Positionierung margin oder padding vor. Es treten keine Nebeneffekte im Elementfluss auf und im Gegensatz zu den Abständen des Box-Modells wird position von allen relevanten Browsern schon lange gut unterstützt.

Hinweis: Dieser Beitrag ist noch in Arbeit, Fortsetzung folgt!