Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Feste Positionierung für Haftende UI-Elemente | CSS-Positionierung Meistern
Fortgeschrittene CSS-Techniken

bookFeste Positionierung für Haftende UI-Elemente

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.

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.

index.html

index.html

index.css

index.css

copy

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.

question mark

Welches Verhalten zeigt die Eigenschaft position: fixed?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookFeste Positionierung für Haftende UI-Elemente

Swipe um das Menü anzuzeigen

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.

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.

index.html

index.html

index.css

index.css

copy

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.

question mark

Welches Verhalten zeigt die Eigenschaft position: fixed?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6
some-alt