Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Relative Positionierung Anwenden | CSS-Positionierung Meistern
Fortgeschrittene CSS-Techniken

bookHerausforderung: Relative Positionierung Anwenden

Hinweis

Jede Herausforderung in diesem Kurs enthält ein Codebeispiel, das aus den Dateien index.html und index.css besteht. Da der Kurs den Schwerpunkt auf das Erlernen von CSS legt, wird empfohlen, die Aufgaben in der Datei index.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

  1. Fügen Sie dem zweiten Element mit dem Klassennamen relative eine item Positionierung hinzu.
  2. Verschieben Sie das Element 30px nach unten und 50px nach links.
index.html

index.html

index.css

index.css

copy
  1. Nach unten verschieben durch Setzen eines positiven Werts für die Eigenschaft top.
  2. Nach links verschieben durch Setzen eines negativen Werts für die Eigenschaft left.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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

bookHerausforderung: Relative Positionierung Anwenden

Swipe um das Menü anzuzeigen

Hinweis

Jede Herausforderung in diesem Kurs enthält ein Codebeispiel, das aus den Dateien index.html und index.css besteht. Da der Kurs den Schwerpunkt auf das Erlernen von CSS legt, wird empfohlen, die Aufgaben in der Datei index.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

  1. Fügen Sie dem zweiten Element mit dem Klassennamen relative eine item Positionierung hinzu.
  2. Verschieben Sie das Element 30px nach unten und 50px nach links.
index.html

index.html

index.css

index.css

copy
  1. Nach unten verschieben durch Setzen eines positiven Werts für die Eigenschaft top.
  2. Nach links verschieben durch Setzen eines negativen Werts für die Eigenschaft left.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3
some-alt