Summary  
This chapter covers the CSS position: fixed property, which positions an element relative to the viewport so that it remains in the same place even when the user scrolls.  

General domain of usage  
Web UI components (e.g., sticky navigation or support chat buttons)

**Fixed Positionierung** ermöglicht es, ein Element relativ zum Ansichtsfenster (dem Browserfenster) und nicht relativ zu seinem Elternelement zu positionieren. Das bedeutet, dass das Element immer an derselben Position auf dem Bildschirm bleibt, selbst wenn der Benutzer die Seite scrollt.
```css
position: fixed;
```

Diese Technik ist nützlich, wenn beispielsweise eine Webseiten-Navigation stets für den Benutzer verfügbar sein soll oder bestimmte Informationen dauerhaft auf dem Bildschirm angezeigt werden müssen. Daher folgt nun eine praktische Übung: Erstellen einer Support-Chat-Schaltfläche, die immer in der rechten unteren Ecke des Ansichtsfensters sichtbar bleibt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTm9iaXMsIGlsbG8KICAgICAgbmVxdWUgZG9sb3JlIG1hZ25hbSBuaWhpbCBpbnZlbnRvcmUgZWxpZ2VuZGkgY3VtcXVlIHZvbHVwdGF0aWJ1cywgdm9sdXB0YXMKICAgICAgYXNwZXJpb3JlcyB2b2x1cHRhdHVtPyBIYXJ1bSBleHBlZGl0YSBpbGx1bSBjdW1xdWUgZnVnYSBtb2RpIG5vc3RydW0KICAgICAgZGVzZXJ1bnQgbW9sbGl0aWEsIHNpbnQgc2FlcGUgcXVhZSBxdWFlcmF0IHJlcnVtIHF1YXNpIG9kaW8gaXBzYW0gdml0YWUKICAgICAgbnVsbGEgdm9sdXB0YXMgbWludXMsIGVvcyBlbmltIHRlbmV0dXIuIEN1bXF1ZSBkb2xvcmVtcXVlIG5lY2Vzc2l0YXRpYnVzCiAgICAgIG5lcXVlIHZvbHVwdGF0dW0uCiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRWxpZ2VuZGkKICAgICAgbGFib3Jpb3NhbSBleGVyY2l0YXRpb25lbSBhZCBkZWxlY3R1cyBuZW1vIHZlcml0YXRpcywgaXBzdW0gZGVsZW5pdGkhIEFtZXQKICAgICAgbGliZXJvIHF1aWEgdGVtcG9yYSBmdWdpYXQgYW5pbWkgYmVhdGFlLCBsYWJvcnVtIGEuIEluIGVzdCByZXBlbGxlbmR1cwogICAgICB1bmRlIGRpY3RhIHN1bnQgdGVtcG9yZSBvZmZpY2lpcyBhZCBleGVyY2l0YXRpb25lbSBuZWNlc3NpdGF0aWJ1cwogICAgICBxdWlidXNkYW0gdm9sdXB0YXMgbWFnbmFtLCByZXB1ZGlhbmRhZSBpbGx1bSBhbmltaSBkb2xvcmlidXMgY29uc2VjdGV0dXIKICAgICAgcHJvdmlkZW50IG51bGxhIGNvbW1vZGkhIE1vbGVzdGlhZSBwZXJmZXJlbmRpcywgcGxhY2VhdCBmdWdhIGJlYXRhZSwgY3VtCiAgICAgIGlwc3VtIGxhYm9ydW0gbmFtIGxhYm9yZSB0ZW1wb3JlIG1hZ25hbSBpcHNhbSByZXB1ZGlhbmRhZSBkZWJpdGlzIGZ1Z2l0CiAgICAgIGF1dCBtb2xsaXRpYSBzaXQsIGRvbG9yZW1xdWUgYXBlcmlhbSBjdXBpZGl0YXRlIGltcGVkaXQgZG9sb3JlIGlsbG8uCiAgICAgIENvbW1vZGkgcmVwZWxsZW5kdXMgY29ycG9yaXMgZWFxdWUgc2ltaWxpcXVlIHZvbHVwdGFzIG9iY2FlY2F0aSwgdGVuZXR1cgogICAgICB1dCBtYWduYW0gcXVpcyBhdXRlbSwgc2FwaWVudGUgcG9zc2ltdXM/IERvbG9yZW1xdWUgcmVjdXNhbmRhZSBsYWJvcmlvc2FtCiAgICAgIHZlbCBuZXF1ZSBpc3RlIG1pbnVzIHJlcHJlaGVuZGVyaXQgbWFnbmkgbWFpb3JlcywgYWxpcXVhbSBuZXNjaXVudCBxdWk/CiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3JlbXF1ZSBkb2xvcgogICAgICBwcmFlc2VudGl1bSBlc3NlIGRlc2VydW50IG9mZmljaWlzIHF1YXMgYXNwZXJpb3JlcyBtYWduaSBhbmltaSByZW0gaXVzdG8KICAgICAgY29tbW9kaSBxdW8sIGluY2lkdW50IG5vc3RydW0gbmF0dXMgcG9ycm8gcmVpY2llbmRpcyBldCBhbGlxdWlkIGV2ZW5pZXQKICAgICAgb3B0aW8hIFVsbGFtLCBzdXNjaXBpdCBxdWkgcXVpcyBpcHNhbSBwZXJmZXJlbmRpcyBsYWJvcnVtIGxhdWRhbnRpdW0/CiAgICAgIEJsYW5kaXRpaXMgc29sdXRhLCBuZWNlc3NpdGF0aWJ1cyBpdGFxdWUsIGRlc2VydW50IGJlYXRhZSBzdXNjaXBpdAogICAgICBkb2xvcmVzLCBjb25zZXF1dW50dXIgZXggdm9sdXB0YXRlIHByYWVzZW50aXVtIHJlcHJlaGVuZGVyaXQgZWFydW0KICAgICAgY29ycnVwdGkgcXVhZXJhdCBjdW0gaGljISBOdWxsYSBhbWV0IGRlYml0aXMgbWluaW1hIGFjY3VzYW11cy4gTW9kaSwgaGljCiAgICAgIHF1aSwgZXggaWQgZnVnYSB2ZXJpdGF0aXMgYXQgdmVsaXQgcXVhZSBpbGxvIG51bGxhIGxhYm9yZSBwb3JybywgaXBzYSBlc3NlCiAgICAgIG5vYmlzIGFzcGVybmF0dXIuCiAgICA8L3A+CiAgICA8YnV0dG9uPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9jaGF0K2ltYWdlK2Zvcit0aGUrcnVubmFibGUrZXhhbXBsZS5wbmciCiAgICAgICAgYWx0PSJjaGF0IGljb24iCiAgICAgICAgd2lkdGg9IjU2cHgiCiAgICAgIC8+CiAgICA8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

YnV0dG9uIHsKICAvKiBUaGlzIGNoYXB0ZXIgZm9jdXMgKi8KICBwb3NpdGlvbjogZml4ZWQ7CiAgYm90dG9tOiAxMHB4OwogIHJpZ2h0OiAxMHB4OwoKICAvKiByZW1vdmUgZGVmYXVsdCBidXR0b24gYmVoYXZpb3IgKi8KICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBib3JkZXI6IG5vbmU7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Die Chat-Schaltfläche ist für den Benutzer stets verfügbar. Sie verschwindet beim Scrollen nicht. Dies wurde ausschließlich mit der Eigenschaft `position: fixed;` erreicht.

Welches Verhalten zeigt die Eigenschaft `position: fixed`?

Verbessern Sie Ihre Styling-Fähigkeiten durch das Beherrschen fortgeschrittener CSS-Techniken für modernes Webdesign. Positionieren und verwalten Sie Elemente präzise mit fortgeschrittenen Positionierungsstrategien. Erstellen Sie fließende Übergänge und ansprechende Animationen zur Verbesserung der Benutzererfahrung. Transformieren und manipulieren Sie Elemente für dynamische visuelle Effekte. Entwickeln Sie responsive Designs, die sich an verschiedene Geräte anpassen, und optimieren Sie Ihren Workflow mit CSS-Präprozessoren wie Sass.

Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?

Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.

Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.

Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.

Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.

Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.

Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.

Feste Positionierung für Haftende UI-Elemente

Awesome!

Feste Positionierung für Haftende UI-Elemente