Fläche mit 300x300 Pixel Größe in blauer Farbe. 150 Pixel von oben und 300 Pixel von links positioniert. Man sieht, dass die Fläche am gleichen Fleck bleibt, während der Rest der Seite gescrollt werden kann.
CSS-Code:position:fixed; top: 150px; left: 300px; width: 300px; height: 300px;
Beispieltext, um das Scrollen und das Verhalten des Kästchens zeigen zu können.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Die fixe Positionierung wird man innerhalb einer Webseite seltener brauchen, weil sich die Elemente gegenseitig anpassen und sich so ihren Platz finden. Aber es gibt vor allem zwei Ideen, die auch die Werbebranche entdeckt hat: das eine ist eine fixe Einblendung am Kopf der Seite oder das Gegenstück als Fußzeile. In beiden Fällen arbeitet man mit fixen Vorgaben, um sicherzustellen, dass entweder normaler Inhalt oder Werbeschaltungen erhalten bleiben, während der eigentliche Inhalt durchgescrollt werden kann.
Ob man auf seiner Webseite eine fixe Kopfzeile (oder englisch einen header) einrichten möchte ist Geschmackssache und auch eine Frage des Themas. Es war eine Zeit lang ein Trend, der aber dann doch nicht so gut angekommen war. Besser ist die Lösung mit einer "nach oben" Schaltfläche, um zum Kopfteil mit wichtigen Elementen wie Hauptnavigation zurückkehren zu können.
Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.
Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.
Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.
Themenseiten
Artikel-Thema: Praktisches CSS-Beispiel für die fixe Positionierung
Beschreibung: Praktisches Beispiel für die 👍 fixe Positionierung in ✅ CSS, wodurch eine Fläche an der Stelle verbleibt, auch wenn man eine Seite scrollt.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel