Herausforderung: Sticky Positionierung
Aufgabe
Erstellen Sie ein Blog-Layout für Tierartikel, bei dem das entsprechende Tierfoto immer sichtbar ist, während der Benutzer den Artikel liest. Wenn der Benutzer beginnt, über ein anderes Tier zu lesen, bieten Sie das nächste Tierfoto an. Schritte:
- Wenden Sie
sticky
-Positionierung auf das Element mit dem Klassennamenillustration
an. - Geben Sie die Position auf der Seite an, an der das Element sticky werden soll.
index.html
index.css
- Um die Tierillustrationen oben im Ansichtsfenster zu fixieren, während der Benutzer den Artikel liest, wenden Sie die
sticky
-Positionierung auf das Element mit dem Klassennamenillustration
an. - Setzen Sie die
top
-Eigenschaft auf0
, um anzugeben, dass das Element oben im Ansichtsfenster fixiert werden soll.
index.html
index.css
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
Herausforderung: Sticky Positionierung
Swipe um das Menü anzuzeigen
Aufgabe
Erstellen Sie ein Blog-Layout für Tierartikel, bei dem das entsprechende Tierfoto immer sichtbar ist, während der Benutzer den Artikel liest. Wenn der Benutzer beginnt, über ein anderes Tier zu lesen, bieten Sie das nächste Tierfoto an. Schritte:
- Wenden Sie
sticky
-Positionierung auf das Element mit dem Klassennamenillustration
an. - Geben Sie die Position auf der Seite an, an der das Element sticky werden soll.
index.html
index.css
- Um die Tierillustrationen oben im Ansichtsfenster zu fixieren, während der Benutzer den Artikel liest, wenden Sie die
sticky
-Positionierung auf das Element mit dem Klassennamenillustration
an. - Setzen Sie die
top
-Eigenschaft auf0
, um anzugeben, dass das Element oben im Ansichtsfenster fixiert werden soll.
index.html
index.css
Danke für Ihr Feedback!