Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

12.6 Wie ein Fels in der Brandung: position: fixed

Die feste Positionierung mit position:fixed verhält sich fast genau wie position:absolute, mit einem kleinen, aber feinen Unterschied:

  • Ein fixiertes Element scrollt nicht mit.

Absolut positionierte Elemente sind relativ zu einem Bezugspunkt im Dokument und scrollen daher mit. Bei fixierten Elementen ist das anders:

  • Das umgebende Element (containing block) ist für fixierte Elemente immer das Browserfenster (der sogenannte viewport).

Da das Browserfenster selbst nicht mitscrollt, bleiben auf der Seite fixierte Elemente stehen. position:fixed ist ideal geeignet für Navigationsbereiche und würde die Benutzung der zu Recht in Verruf geratenen Frames fast vollständig überflüssig machen. Leider ignoriert der Internet Explorer bis inkl. V6 position:fixed, was für das gewünschte Layout zum Teil drastische Folgen haben kann. IE7 und IE8 interpretieren position: fixed korrekt.

Hier ein kleines Beispiel. Gegeben sei folgendes HTML, in dem das fett gedruckte div-Element per CSS fixiert wird (den Blindtext können Sie sich übrigens bei http://lipsum.org erzeugen lassen):

<body>
<div id="fixiert">Fixierte Box</div>

<p>Absatz 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi rhoncus volutpat nisl. Praesent elementum odio ac nibh. Duis at quam nec dolor consequat blandit. Sed libero. Vivamus faucibus purus non purus. Suspendisse id ante ut nulla facilisis porta.</p>
<p>Absatz 2. Nullam vulputate hendrerit nunc. Nullam dapibus blandit orci. Nunc metus. Sed sed ante. Cras interdum, erat at pharetra sodales, elit ligula nonummy nisi, sit amet auctor purus leo vel urna. Pellentesque ac augue sit amet ipsum nonummy sodales. Sed libero augue, ultricies et, tristique ut, posuere commodo, ligula. Integer aliquet. Donec varius lectus. </p>
</body>

Und hier das CSS dazu:

p { margin-left: 25%; }
#fixiert {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #f3c600;
  width: 15%;
  padding: 10px;
  border: 1px solid black;
}

Diese beiden Quelltext-Schnipsel ergeben folgendes Bild, links im Firefox, rechts im Internet Explorer 6:

Abbildung 12.9: position-fixed im Firefox und im Internet Explorer 6
Abbildung 12.9: position-fixed im Firefox und im Internet Explorer 6

Wie Sie sehen, ignoriert der Internet Explorer 6 position:fixed komplett, und die HTML-Elemente fließen ganz normal weiter. Diese Tatsache macht den Einsatz von position:fixed zwar nicht prinzipiell unmöglich, erhöht den Aufwand aber doch beträchtlich.

Update: IE6 ist nicht mehr relevant

Der IE6 kennt zwar kein position:fixed, aber das sollte Sie heute nicht davon abhalten, diese Technik einzusetzen. IE6 is a thing of the past.