Zurück zur Homepage

KS Webdesign - Der Blog

Hinweise zu den Tutorials:
Bitte aus dem kopierten Quelltext: <p class="bitte_loeschen">.....</p> und die Gestaltungsanweisungen dazu entfernen.

Fixierte Positionierung

10. Dezember 2009 von Klaus

Zu absoluter Positionierung gibt es schon einen Artikel, zur relativen Positionierung ebenfalls.

Jetzt fehlt noch die fixierte Positionierung, die im Grunde eine Unterabteilung der absoluten Positionierung ist.

D.h. es gelten fast die gleichen Regeln wie für position:absolute;, außer das dort immer body als Bezugspunkt für Positionsangaben gilt. Außerdem kennt der IE 6 position:fixed; nicht und ignoriert es deshalb.

Hier findest du die position-fixed-anfang.htm zum Quelltext rauskopieren.

Bilder gibt es diesmal leider nicht, aber ich denke diesmal geht es auch ohne.

Bitte CSS ergänzen:

  • .fixed {
  • position:fixed;
  • left:40px;
  • top:20px,
  • }

Wenn ihr jetzt im Browser nach unten scrollt, kommt das fixierte Element mit. Setzt ihr die Positionsangaben auf null drängelt sich das fixierte Element ganz nach oben links, kommt aber beim Scrollen immer noch mit.

Beim IE 6 passiert nix. Das fixierte Element kommt einfach nicht mit.

Zum einen kann man den IE6 dabei einfach ignorieren, es gäbe allerdings z.B. die Möglichkeit ihm per Javascript auf die Sprünge zu helfen.

Oder ihr verzichtet auf position:fixed;.

0 Kommentare und 3 Trackbacks/Pingbacks

  1. Pingback Relative Positionierung – Donnerstag, 10. Dezember 2009 um 15:56

    [...] ich mit diesem Artikel zur absoluten Positionierung. Fortsetzen will ich mit position:relative;.Mit fixierter Positionierung wird es [...]

  2. Pingback Absolute Positionierung – Donnerstag, 10. Dezember 2009 um 15:58

    [...] fixierte Positionierung habe ich auch nicht [...]

  3. Pingback Anonymous – Freitag, 11. Dezember 2009 um 10:25

    [...] die Positionierung "fixed" ist. Das ist (logischer weise) immer der Body. Siehe auch: Fixierte Positionierung Solche Pseudoframe-Layouts sind nicht ganz unproblematisch, vor allem, wenn sie noch Zentriert [...]

Sprich und fürchte dich nicht:

Die Angaben des Namens und der E-Mail sind leider notwendig, das Feld für die Website optional.

Bitte maskiert < mit &lt; und > mit &gt; sonst verschwinden sie im Nirgendwo!

« »