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.
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;
}
absolute
: Positionierung mit dem HolzhammerMit 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.
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 Quellcodes, 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 positioniert an der linken oberen Ecke der Seite. Auch hier
hat der Text in dem <div>
davor keinerlei
Auswirkung auf die Positionierung der Box 4.
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 Darstellungsreihenfolge 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.
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 selbstrelative
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!