Es ist eigentlich kein Geheimnis – aber damit nicht nochmal jemand sagt, es wäre für den IE6 unmöglich, ein position:fixed zu realisieren.. nun ja, eigentlich ist es ja auch nur ein ein Hack – wie dem auch sei..

Warum Augenmerk auf den IE6? – Es ist Fakt, das der IE6 und Konsorten aka Tonlinebrowser, etc.pp derzeit noch hoch im Gebrauch sind – dennoch sind die neuen Webstandards XHTML 1.0/1.1 sowie CSS 2 nicht zu vergessen.

Das Problem: Der Internet Explorer kann bis einschließlich Version 6 diverse Eigenschaften des CSS-2-Standards nicht, u.a. gehört die sehr nützliche position:fixed Eigenschaft. Mit Hilfe dieser Einstellung können Elemente auf den Bildschirm unabhängig vom Scrolltext fixiert werden.

Die Lösung: In den unendlichen Weiten und Tiefen von Browserhacks, -weichen und -hacks gibt es u.a. folgendes, welches nur vom IE bis einschließlich IE6 interpretiert wird:

* html <…>

Erklärung: Diese Kindelemente sind an für sich normal und zeigen normalerweise auf eins der jeweiligen Kindelemente. * html ist allerdings Unsinn, da über html gar nichts vorhanden ist. Wir hätten also schon mal die Möglichkeit, direkt per Stylesheet für die Problemstelle zu beheben, ohne das andere Browser (Firefox, Mozilla, Opera, IE7) irritiert werden würden.

Die position:fixed Eigenschaft lässt sich wie folgt simulieren: Man “verlegt” den Overflow, also die scrollbare Eigenschaft einfach vom Body in den Content-Layer; man kann sich das quasi als ein fenstergroßes Div-Layer vorstellen, welches Scrollbalken hat. Die “fixierten” Elemente sind dann normale “absolute” Elemente, welche bereits Bestandteil von CSS 1 sind und daher auch vom IE 6 bereits unterstützt werden.

Zusammenfassend also, in Pseudo-validem HTML-Code

<html>
  <head>…</head>
  <body>
    <div id="content">…</div>
    <div id="sidebar">…</div>
  </body>
</html>

Der CSS-Code:

body {
  margin-left:105px;
}

#sidebar {
  position:fixed;
  top:0;
  left:0;
  width:100px;
}

/\* fix für ie4-ie6 \*/
  
* html {
  overflow-y: hidden;
}
  
* html body {
  height: 100%;
  overflow: auto;
}
* html body #sidebar {     
  position: absolute;
}
  
* html body #helper {
  position: absolute;
}

Natürlich, es besteht auch die Möglichkeit, über IE-Comments spezifische Angaben einzuschleusen. Allerdings müssen dort explizite Anweisungen im Dokument stehen, die nicht immer möglich sein können.. bei dieser Lösung ist das HTML-Dokument “Fixlos”. Und so sollte es ja sein.

In Anlehnung an tagsoup