Testen Sie Ihre Fähigkeiten: Positionierung
Ziel dieses Fähigkeitentests ist es zu beurteilen, ob Sie das Positionieren in CSS mittels der CSS position Eigenschaft und Werten verstehen. Sie werden durch zwei kleine Aufgaben arbeiten, die verschiedene Elemente des gerade behandelten Materials nutzen.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns in einem unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie das Element mit der Klasse target oben rechts im Container mit der 5px grauen Umrandung positionieren.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Zusätzliche Frage:
- Als zusätzliche Herausforderung, können Sie das Ziel unter dem Text anzeigen lassen?
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe, wenn Sie den Kasten im untenstehenden Beispiel scrollen, scrollt die Seitenleiste mit dem Inhalt. Ändern Sie es so, dass die Seitenleiste an Ort und Stelle bleibt und nur der Inhalt scrollt.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.