CSS 2.1: `position`

Erläuterungen

Die Eigenschaft position dient der Positionierung. Ein Element wird dann als positioniert bezeichnet, wenn diese Eigenschaft einen anderen Wert als static hat. Position definiert damit eines der drei Positionierungsschemata in CSS. Diese Eigenschaft gibt also die Art der Positionierung eines Elements an, nicht die bildschirm- geographische Position selbst. Dazu benötigt sie als Ergänzung immer noch die Eigenschaften top, right, bottom oder left.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'position' static | relative | absolute | fixed | inherit

static (Ausgangswert): Entspricht der Positionierung im normalen Elementfluss. Das Element ist praktisch unbeweglich im Rahmen des Dokumentes positioniert. Hier haben die Elemente top, right, bottom und left keine Auswirkung.
relative: Die Position eines Elementes wird zunächst wie im normalen Elementfluß berechnet. Die Verschiebung erfolgt dann von der so bestimmten Stelle aus und ist (anders als bei der Eigenschaft float) nicht von den Dimensionen des umschließenden Blocks abhängig. Die Positionen der benachbarten Elemente werden nicht beeinflusst, sie bleiben in ihrer ursprünglichen Position. Die ursprüngliche Position des verschobenen Elements bleibt frei. Die benachbarten Elemente können allerdings, abhängig vom z-index, durch das verschobene Element überdeckt werden. Ein relativ positioniertes Element bildet den umschließenden Block für nachgeordnete Elemente. Der Effekt, den dieser Wert auf Elemente von Tabellen wie th, tbody usw. hat, wird durch CSS 2.1 nicht definiert.
absolute: Durch die absolute Positionierung wird das Element vollständig aus dem normalen Elementfluß gelöst und hat auf die Position der nachfolgenden Elemente keinen Einfluß mehr. Bei der Positionierung der Nachbarelemente wird ein absolut positioniertes Element nicht beachtet. Absolut positionierte Elemente sind in ihrer Lage völlig unabhängig von ihren Nachbarelementen und können deshalb andere Elemente verdecken.; Die Position des Elementes ist am umschließenden Element orientiert. Für absolut positionierte Elemente ist dies das nächste Vorfahrenelement, das nicht statisch positioniert ist. Ist so eines nicht vorhanden, stellt das Stammelement <HTML>..</HTML> den umschließenden Block zur Verfügung.
fixed: Die fixe Positionierung kann als 'Unterart' der absoluten Positionierung angesehen werden. Der Unterschied besteht darin, dass die Bezugsgröße nicht durch den umschließenden Block, sondern durch das Ausgabemedium definiert ist.; Im Falle einer Bildschirmausgabe erfolgt die Positionierung bezogen auf das Ausgabefenster des Anwenderprogramms, das Element bleibt auch beim Scrollen des Bildschirms an seiner Stelle. Im Falle einer Druckausgabe soll die Position auf die einzelne Druckseite bezogen sein, auch wenn man sich die Seite als Druckvorschau am Bildschirm ansieht. So soll z. B. eine fix positionierte Kopfzeile am Bildschirm feststehend und beim Druck im Kopf jeder Seite ausgegeben werden. Dies kann durch Festlegung unterschiedlicher @media-Regeln beeinflusst werden.; Die Eigenschaften für Druckausgaben wurden bisher in den wenigsten Anwenderprogrammen implementiert und deshalb bis auf drei Ausnahmen nicht in CSS 2.1 übernommen.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

P.fussnote { position: relative; top: 1em; } @media print { P.fussnote { position: fixed; bottom: 0; } }

Browserunterstützung

Die Eigenschaft position wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6, IE 7: Internet Explorer bis zur Version 6 erkennt den Wert fixed nur am Element body. An allen anderen Elementen angewendet, kann dieser Wert unvorhersehbare Auswirkungen haben. Abhilfe gibt ein JavaScript.
Von der Version 7 an ist der Fehler behoben.
IE/Mac 5.x: Anders als die Windows-Version unterstützt IE/Mac alle Werte dieser Eigenschaft an allen Elementen. Ein kleines Problem tritt jedoch an Links innerhalb von fixed positionierten Elementen auf. Dort löst sich beim Scrollen die Klickfläche von der Schrift des Textlinks.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

top, right, bottom, left,
z-index

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.