CSS, HTML und Javascript mit {stil}

CSS position • Typ der Positionierung

CSS Position: position:absolute, position:relative

CSS position nimmt Elemente aus dem Fluss und gibt ihnen eine Position relativ zum Dokument oder relativ zu ihrem umfassenden Block.

Im reinen HTML sind Elemente im Fluss des Dokuments positioniert. Sie erscheinen Element für Element nacheinander in der Reihenfolge wie im HTML im Browserfenster. Diese einfachste Art der Positionierung wird auch als flow oder statisch bezeichnet.

Alle HTML-Inhalte erzeugen Boxen, die in einem Verhältnis zum Dokument liegen oder ganz aus dem Textfluss herausgenommen sind.

CSS position legt nicht die Position eines Elements innerhalb des Browserfensterns oder Dokuments fest, sondern den Typ der Positionierung.

position kann auf alle Elemente angewendet werden und hat sechs mögliche Werte:

  • static | statisch
  • relative | relativ
  • absolute | absolut
  • fixed | fest
  • sticky | Mischung aus relativ und fixed
  • inherit | geerbt

position: static

static ist die Voreinstellung: Die Box liegt im Fluß des Dokuments und ist normal positioniert. position: static muss nicht deklariert werden, es sei denn, ein anderer Wert soll überschrieben werden.

top, bottom, left und right haben keinen Einfluss auf eine statische Box.

position: relative

Eine relativ positionierte Box liegt im Fluß des Dokuments – als wäre sie statisch oder gar nicht positioniert. Für Boxen oder Blöcke vor oder hinter dem relativ positionierten Block macht es keinen Unterschied, ob die Box relativ oder statisch bzw. gar nicht positioniert ist.

top, bottom, left und right verschieben eine relative Box von ihrer ursprünglichen Position und hinterlassen eine Lücke an der dieser Stelle. Die Inhalte der folgenden Blöcke reagieren, als wäre die relative Box nicht verschoben.

Bei Änderungen vorangehender Blöcke behält die Box ihre Position relativ zu ihrem Ursprung und wandert mit.

Das ist das Relative an der relativen Positionierung

Ein margin oder die Änderung der Größe hingegen beeinflussen die folgenden Blöcke.

1
top / bottom ändern
left / right ändern
Höhe ändern
Box 1 ändern

position: absolute

Ein absolut positionierter Block wird aus dem Fluß des Dokuments genommen. Die dahinter liegenen Inhalte folgen lückenlos und reagieren, als gäbe es die absolute Box nicht.

top, bottom, left und right positionieren eine absolut positionierte Box. Wo die Box dann landet, hängt von der Art der Positionierung ihres umfassenden Blocks ab.

Für eine absolut positionierte Box kann zwar ein margin angegeben werden, aber ein margin hätte keinen Einfluß auf andere Blöcke.

Wenn für einen Block mit CSS position: absolute keine Breite angegeben ist, hat er eine – sagen wir mal – ziemlich exotische Eigenheit: Absolut positionierte Elemente werden nur so breit wie ihr Inhalt. Wird also nur ein Wort oder ein Bild in den Block gesetzt, wird der Block nur so breit wie das Wort oder das Bild.

position:absolute

Für diesen absolut positionierten Block ist weder top / bottom noch left / right angegeben. Würde top: 0; left: 0; eingesetzt, würde der Block nach oben links in den Viewport rutschen.

Ausprobieren?

Wo das Ding jetzt gelandet ist? Keine Ahnung. Das ist dein Monitor. Irgendwo ganz oben. Du kannst mal raufscrollen und suchen.

position: fixed

Ein Block mit position: fixed ist im Viewport fixiert – dem sichtbaren Ausschnitts des Dokuments im Browser. Genauso wie ein absoluter Block liegt ein fixierter Block nicht im Fluß des Dokuments.

Ein absolut positionierter Block liegt relativ zu seinem Container oder zum HTML-Dokument und scrollt mit. Ein fixierter Block sitzt fest im Viewport des Browserfensters.

position:fixed

Ohne Angabe von top / bottom, left /right sieht es aus, als wäre der fixierte Block einfach nicht da oder hätte ein display:none abbekommen.

Sichtbar machen?

position: sticky

Eine Seitenleiste oder die Navigation beim Scrollen nach oben laufen zu lassen, bis sie an den Rand des Browerfensters stoßen und dann festzustellen, ist eine moderne Technik des Webdesigns und wird durch Javascript umgesetzt.

position: sticky ist neu in CSS3 und verlagert dieses Verhaltensmuster ins reine CSS.

@media (min-width: 720px) {
   nav.top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
   }
   nav .topmenu {
       display: -ms-flexbox;
       display: flex; 
       -ms-flex-pack: justify;
       justify-content:space-between; 
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   }
}

setzt die obere Navigationsleiste – das Topmenü – fest, sobald das Menü an die obere Kante des Browserfensters stößt.

Zurzeit nur Safari mit -webkit-Präfix und Firefox. Chrome hat display: sticky nach dem Übergang auf Blink als Rendering Machine vollständig entfernt.

Positionieren für Layout

Obwohl CSS position so klingt, als wäre es die Technik der Wahl für das Layout von Webseiten, ist »float: left« bzw. »float: right« die meistgebrauchte Technik für die Positionierung von Layout-Blöcken.

CSS position hingegen ist keine Grundlage für den Aufbau eines Layouts. Seine Stärke entwickelt position, wenn ein relativ positionierter Block als Container für absolut positionierte Elemente eingesetzt wird.

Ein Element mit position: relative behält immer seine relative Position innerhalb des Inhalts. Der relativ positionierte Container wird zum Koordinatensystem der absoluten Blöcke. Das macht Konstruktionen wie Drop-Down-Menüs und Slideshows schön einfach.

Mit CSS3 gibt es zusätzlich display:flex, das Boxen kontrolliert nebeneinander (row) und untereinander (column) positioniert. display:flex kann zusammen mit position:absolute, position:fixed oder position:relative benutzt werden kann.

Ausführliches Beispiel: Layout von Webseiten: absolut und relativ positionieren

CSS position

Erblich: Nein

position
ist eine von zwei Eigenschaften, mit denen die physikalische Position eines Elements auf einer Seite gesteuert wird (die andere Eigenschaft ist float).
Werte
absolute | fixed | relative | static
absolute
positioniert ein Element an einer beliebigen Position des Browserfensters oder eines umfassenden, relativ positionierten Blocks. Die Position kann eine der Eigenschaften bottom, left, right oder top sein.
fixed
positioniert ein Element an einer beliebigen Stelle des Viewports (Browserfenster). Dort steht das Element fest, auch wenn die Seite im Browserfenster gescrollt wird. fixed wird von Internet Explorer erst ab Version 7 unterstützt!
relative
positioniert ein Element relativ zu seiner Position im normalen Inhaltsfluss der Seite.
sticky
Mischung aus relative und fixed
static
ist die Vorgabe und stellt ein Element dort dar, wo es im normalen Inhaltsfluss der Seite liegt.