Wie positioniere ich ein Rechteck mit CSS an einer festen Stelle auf der Seite?

Das folgende Rechteck bleibt immer an der gleichen Position, selbst wenn du die Seite scrollst.

Ein Rechteck mit CSS an einer festen Stelle auf der Seite zu positionieren, erreichst du am einfachsten mit der Eigenschaft `position: fixed`. Diese Positionierung sorgt dafür, dass das Element relativ zum Browserfenster fixiert wird und nicht mitscrollt.

Zuerst definierst du die Größe des Rechtecks mit den Eigenschaften `width` und `height`. Danach gibst du die Hintergrundfarbe an, damit das Rechteck sichtbar wird.

Mit `position: fixed` gibst du dem Rechteck eine feste Position. Anschließend bestimmst du den Abstand von den Seiten des Browserfensters mithilfe von `top`, `left`, `right` oder `bottom`. In dem Beispiel ist das Rechteck 50 Pixel vom oberen Rand und 100 Pixel vom linken Rand des Bildschirms entfernt.

Dadurch bleibt das Rechteck unabhängig von der Seitenposition immer an genau dieser Stelle sichtbar. Diese Methode eignet sich sehr gut für Menüs, Benachrichtigungen oder andere UI-Elemente, die stets sichtbar sein sollen.