Herausforderung: Relative Positionierung Anwenden
Hinweis
Jede Herausforderung in diesem Kurs enthält ein Codebeispiel, das aus den Dateien
index.html
undindex.css
besteht. Da der Kurs den Schwerpunkt auf das Erlernen von CSS legt, wird empfohlen, die Aufgaben in der Dateiindex.css
zu bearbeiten. Nach Abschluss einer Aufgabe klicken Sie auf die Schaltfläche "Run Code", um die Live-Seite anzuzeigen und sicherzustellen, dass die Aufgabe korrekt gelöst wurde.Darüber hinaus bietet jede Herausforderung die Schaltflächen "Hint" und "Solution". Durch Klicken auf die Schaltfläche "Hint" werden Hinweise zur aktuellen Aufgabe angezeigt, während die Schaltfläche "Solution" das Codebeispiel mit der korrekten Anwendung von CSS offenbart.
Aufgabe
- Fügen Sie dem zweiten Element mit dem Klassennamen
relative
eineitem
Positionierung hinzu. - Verschieben Sie das Element
30px
nach unten und50px
nach links.
index.html
index.css
- Nach unten verschieben durch Setzen eines positiven Werts für die Eigenschaft
top
. - Nach links verschieben durch Setzen eines negativen Werts für die Eigenschaft
left
.
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
How do I select the second element with the `item` class in CSS?
Can you explain how `position: relative` works in this context?
What values should I use for the `top` and `left` properties to achieve the required movement?
Awesome!
Completion rate improved to 2.04
Herausforderung: Relative Positionierung Anwenden
Swipe um das Menü anzuzeigen
Hinweis
Jede Herausforderung in diesem Kurs enthält ein Codebeispiel, das aus den Dateien
index.html
undindex.css
besteht. Da der Kurs den Schwerpunkt auf das Erlernen von CSS legt, wird empfohlen, die Aufgaben in der Dateiindex.css
zu bearbeiten. Nach Abschluss einer Aufgabe klicken Sie auf die Schaltfläche "Run Code", um die Live-Seite anzuzeigen und sicherzustellen, dass die Aufgabe korrekt gelöst wurde.Darüber hinaus bietet jede Herausforderung die Schaltflächen "Hint" und "Solution". Durch Klicken auf die Schaltfläche "Hint" werden Hinweise zur aktuellen Aufgabe angezeigt, während die Schaltfläche "Solution" das Codebeispiel mit der korrekten Anwendung von CSS offenbart.
Aufgabe
- Fügen Sie dem zweiten Element mit dem Klassennamen
relative
eineitem
Positionierung hinzu. - Verschieben Sie das Element
30px
nach unten und50px
nach links.
index.html
index.css
- Nach unten verschieben durch Setzen eines positiven Werts für die Eigenschaft
top
. - Nach links verschieben durch Setzen eines negativen Werts für die Eigenschaft
left
.
index.html
index.css
Danke für Ihr Feedback!