Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Scrollen und dann stehen bleiben: "position:sticky" für die Navigation
Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
Scrollen und dann stehen bleiben: "position:sticky" für die Navigation
Ich möchte Ihnen jetzt "position: sticky;" zeigen. Und das ist eine Art Zwitter aus static und fixed. Es scrollt mit und bleibt dann an einer bestimmten Stelle stehen. Und das möchte ich Ihnen jetzt hier am Beispiel der Übungswebsite zeigen. Die Dateien aus dem Anfangsordner zu diesem Film sind in dem Übungsordner kopiert. Geöffnet sind index.html und navi-inline.css. Und in der Live-Vorschau sehen wir die Startseite. Die Navigation scrollt einfach mit aus dem Bild und ich möchte jetzt erreichen, dass sie zwar zunächst mitscrollt, dass sie aber stehen bleibt, wenn sie hier an den Bildschirmrand kommt. Und dazu gibt es, Sie ahnen es fest, "position: sticky;". .site-nav ist der Selektor für die Navigation hier. Und ich möchte jetzt hier die Positionierung einmal einrichten: "position: sticky;". So, da ist also hier bis jetzt überhaupt noch nichts passiert. Denn es gibt noch keine Bezugspunkte. Und der soll lauten "top: 0;". Das reicht schon, denn jetzt wird top, achten Sie einmal…
Inhalt
-
-
-
-
-
(Gesperrt)
Block- und Inline-Boxen im Flow: Der Block Formatting Context3 Min. 23 Sek.
-
(Gesperrt)
Block-Boxen im Flow und die Eigenschaft "position" im Überblick3 Min. 20 Sek.
-
(Gesperrt)
Versetzt weiterfließen - "position:relative"2 Min. 32 Sek.
-
(Gesperrt)
Raus aus dem Fluss: "position:absolute"2 Min. 12 Sek.
-
Praktisch: absolute und relative Positionierung kombinieren3 Min. 59 Sek.
-
(Gesperrt)
Wie ein Fels in der Brandung: "position:fixed"2 Min. 40 Sek.
-
(Gesperrt)
Scrollen und dann stehen bleiben: "position:sticky" für die Navigation2 Min. 22 Sek.
-
(Gesperrt)
Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index"3 Min. 49 Sek.
-
(Gesperrt)
Challenge: Eine Bildbeschriftung über dem Bild platzieren1 Min. 16 Sek.
-
(Gesperrt)
Solution: Eine Bildbeschriftung über dem Bild platzieren2 Min. 23 Sek.
-
(Gesperrt)
-
-
-
-
-