Feste 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.css
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.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Feste 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.css
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.
Danke für Ihr Feedback!