Eine der wichtigsten CSS-Eigenschaften, die die Webentwicklung für immer verändert hat, ist die Eigenschaft fixed. Dadurch bleibt das Element an derselben Stelle auf der Seite, unabhängig vom Scrollen durch den Benutzer. Das heißt, ein Element mit fester Positionierung ist immer sichtbar, unabhängig davon, wie niedriger der Bildlaufbereich ist.
So verwenden Sie eine Eigenschaft fixed, Sie müssen das Element auf einen Wert festlegen position: fixed; in CSS-Stilen. Anschließend können Sie mithilfe von Eigenschaften angeben, wo sich das Element auf der Seite befinden soll top, bottom, left und right. Zum Beispiel:
In diesem Beispiel befindet sich das Element in der oberen rechten Ecke des Browserfensters, wobei es oben und rechts jeweils 20px bzw. 30px eingerückt ist. Wenn der Benutzer die Seite nach unten oder rechts scrollt, bleibt das Element weiterhin an seinem Platz.
Eigenschaft fixed es ist sehr nützlich, wenn Sie ein Navigationsmenü oder eine Seitenleiste an eine Seite anheften müssen, damit sie immer im Blickfeld der Benutzer sind. fixed kann auch verwendet werden, um modale Fenster, Popup-Meldungen oder andere Elemente zu erstellen, die unabhängig vom Scrollen der Seite sichtbar bleiben sollen.
Arbeiten und Beispiele für die Verwendung von fixed in der Webentwicklung
Webentwickler verwenden die CSS-Position-Eigenschaft: fixed, um Elemente zu erstellen, die beim Scrollen durch die Seite auf dem Bildschirm unbeweglich bleiben. Wenn Sie den Wert fixed verwenden, bleibt das Element an einer bestimmten Position auf dem Bildschirm "haften" und ändert seine Position beim Scrollen nicht.
Beispiele für die Verwendung von position: fixed umfassen die Erstellung eines festen oberen Menüs oder einer Social-Media-Seitenleiste. Das feste Menü bleibt auch dann sichtbar, wenn der Benutzer nach unten auf der Seite scrollt, wodurch die Navigation einfacher wird.
Nehmen wir an, wir haben den folgenden HTML-Code, um ein festes Menü zu erstellen:
In CSS können wir die folgenden Stile anwenden, um ein festes Menü zu erstellen:
.fixed-menu .fixed-menu ul .fixed-menu li .fixed-menu li a
Dieser Code legt eine feste Position für ein Element mit der fixed-menu-Klasse am oberen Bildschirmrand fest ( top: 0; left: 0; ). Die Breite des Elements ist auf 100% des Bildschirms eingestellt und die Hintergrundfarbe ist #f1f1f1. Das Menü hat eine nicht nummerierte Liste, deren Elemente mit display: inline; in einer Zeile angezeigt werden. Links haben eine schwarze Textfarbe, einen Einzug und keinen Unterstrich.
Verwenden der Position-Eigenschaft: fixed in Kombination mit anderen CSS-Regeln können Entwickler eine Vielzahl von festen Elementen erstellen, um die Benutzeroberfläche und die Navigation auf Webseiten zu verbessern.
Definition, Zweck und Anwendungsbereich
CSS position Eigenschaft: fixed gibt an, dass ein Element relativ zum Browserfenster fixiert werden muss und selbst beim Scrollen der Seite an seinem Platz bleibt.
Der Zweck der Verwendung der position: fixed-Eigenschaft in der Webentwicklung besteht darin, Elemente zu erstellen, die auch beim Scrollen auf der Seite sichtbar bleiben. Dies kann nützlich sein, um das Navigationsmenü, die Seitenleiste oder andere Elemente der Benutzeroberfläche anzuheften, die Sie immer sehen sollten.
Der Anwendungsbereich der Eigenschaft position: fixed ist breit. Es kann verwendet werden, um fixierte Elemente auf jeder Art von Webseite zu erstellen, einschließlich Blogs, E-Commerce, Unternehmenswebsites und mehr. Diese Eigenschaft ist nützlich, wenn Sie ein festes Element benötigen, das immer während der gesamten Seite angezeigt wird, ohne dass ein Bildlauf erforderlich ist.
