Relative Positionierung in CSS anwenden

Einführung

In diesem Lab lernst du, wie du relative Positionierung in CSS anwenden kannst, indem du eine Weblayout mit zwei Bildern erstellst. Das Lab führt dich durch die Einrichtung einer HTML-Projektstruktur, das Erstellen einer grundlegenden CSS-Stylesheet und die Implementierung von relativen Positionierungstechniken für die Bildplatzierung.

Du wirst beginnen, indem du ein Projektverzeichnis erstellst, eine HTML-Datei mit Bildplatzhaltern initialisierst und Beispielbilder herunterlädst. Anschließend wirst du eine CSS-Stylesheet entwickeln, um das Layout und die Positionierung dieser Bilder mit Hilfe von relativer Positionierung zu definieren, die es dir ermöglicht, die Position von Elementen relativ zu ihrem normalen Dokumentfluss anzupassen, ohne die Layouts anderer Elemente zu beeinflussen.

HTML-Projektstruktur einrichten

In diesem Schritt wirst du die grundlegende HTML-Projektstruktur für das Lernen der relativen Positionierung in CSS einrichten. Wir werden ein einfaches Projektverzeichnis erstellen und die erforderlichen Dateien für unseren Weblayout-Experiment initialisieren.

Navigiere zunächst zum Projektverzeichnis:

cd ~/project

Erstelle ein neues Verzeichnis für unser CSS-Positionierungsprojekt:

mkdir css-positioning
cd css-positioning

Erstelle nun die grundlegenden Projekt-Dateien mit der WebIDE:

Erstelle eine HTML-Datei namens index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Relative Positionierung</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="left-image.jpg" alt="Left Image" class="left-image" />
      <img src="right-image.jpg" alt="Right Image" class="right-image" />
    </div>
  </body>
</html>

Lade Beispielbilder für das Projekt herunter:

wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg

Beispielausgabe:

--2024-xx-xx xx:xx:xx--  https://labex.io/sample-left-image.jpg
Resolving labex.io (labex.io)...
Lade Beispielbilder herunter...

Diese Einrichtung erstellt eine grundlegende HTML-Struktur mit Platzhaltern für Bilder und bereitet das Projekt für CSS-Positionierungs-Experimente in den folgenden Schritten vor.

Grundlegendes CSS-Stylesheet erstellen

In diesem Schritt wirst du ein grundlegendes CSS-Stylesheet erstellen, um die grundlegenden Stile für deine Webseite zu definieren. Mit CSS (Cascading Style Sheets) kannst du die Layouts, das Erscheinungsbild und die Positionierung von HTML-Elementen steuern.

Navigiere zum Projektverzeichnis:

cd ~/project/css-positioning

Erstelle in der WebIDE eine neue CSS-Datei namens styles.css:

/* Grundlegende Reset- und Container-Stile */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

/* Anfangs-Stile für Bilder */
.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 1px solid #666;
}

Zergliedern wir das CSS:

Der *-Selector wendet einen Reset an, um Standard-Margins und -Paddings zu entfernen
.container erstellt einen zentrierten Container mit einem Rand
.left-image und .right-image setzen die Anfangs-Größen der Bilder und fügen einen Rand hinzu

Beispielausgabe beim Anzeigen im Browser:

[Ein zentrierter Container mit einem Rand, der zwei Bilder gleicher Größe enthält]

Dieses grundlegende Stylesheet liefert die Grundlage für unser Experiment zur relativen Positionierung. In den nächsten Schritten werden wir diese Stile ändern, um relative Positionierungstechniken zu demonstrieren.

Relative Positionierung für das linke Bild implementieren

In diesem Schritt wirst du lernen, wie du relative Positionierung verwendest, um das linke Bild innerhalb seines ursprünglichen Dokumentflusses zu verschieben. Die relative Positionierung ermöglicht es dir, die Position eines Elements relativ zu seiner normalen Position anzupassen, ohne andere Elemente zu beeinflussen.

Öffne die Datei styles.css in der WebIDE und füge für das linke Bild den folgenden CSS-Code hinzu:

.left-image {
  position: relative;
  top: 20px; /* Verschiebe 20 Pixel nach unten */
  left: 50px; /* Verschiebe 50 Pixel nach rechts */
  background-color: #f0f0f0; /* Füge einen hellen Hintergrund hinzu, um die Sichtbarkeit zu erhöhen */
}

Wichtige Punkte zur relativen Positionierung:

position: relative; aktiviert die relative Positionierung
top verschiebt das Element nach unten
left verschiebt das Element nach rechts
Der ursprüngliche Platz des Elements wird beibehalten
Andere Elemente werden durch diese Bewegung nicht beeinflusst

Beispielhafte visuelle Ausgabe:

[Linkes Bild um 20px nach unten und 50px nach rechts verschoben,
 wobei sein ursprüngliches Layout-Space beibehalten wird]

Die relative Positionierung ermöglicht es dir, die Platzierung der Elemente fein abzustimmen, ohne die Gesamtlayout der Seite zu stören.

Relative Positionierung für das rechte Bild implementieren

In diesem Schritt wirst du die relative Positionierung auf das rechte Bild anwenden und zeigen, wie du mit CSS Elemente unabhängig voneinander verschieben kannst. Wir werden unterschiedliche Positionierungswerte verwenden, um die Flexibilität der relativen Positionierung zu demonstrieren.

Öffne die Datei styles.css in der WebIDE und füge für das rechte Bild den folgenden CSS-Code hinzu:

.right-image {
  position: relative;
  bottom: 30px; /* Verschiebe 30 Pixel nach oben */
  right: -40px; /* Verschiebe 40 Pixel nach links */
  background-color: #e0e0e0; /* Füge einen hellen Hintergrund hinzu, um die Sichtbarkeit zu erhöhen */
}

Wichtige Unterschiede bei der Positionierung:

bottom verschiebt das Element nach oben
right mit einem negativen Wert verschiebt das Element nach links
Das Bild behält seinen ursprünglichen Layout-Raum bei
Andere Elemente werden durch diese Bewegung nicht beeinflusst

Beispielhafte visuelle Ausgabe:

[Rechtes Bild um 30px nach oben und 40px nach links verschoben,
 wobei sein ursprüngliches Layout-Space beibehalten wird]

Dieses Beispiel zeigt, wie du verschiedene Positionierungseigenschaften verwenden kannst, um die Platzierung von Elementen mit Hilfe der relativen Positionierung fein abzustimmen.

Positionierung und Layout überprüfen

In diesem letzten Schritt wirst du die relativen Positionierungstechniken, die auf die Bilder angewendet wurden, überprüfen und verifizieren. Wir werden einige abschließende Details hinzufügen, um das visuelle Verständnis davon zu verbessern, wie die relative Positionierung funktioniert.

Aktualisiere die Datei styles.css mit einer vollständigen Gestaltung, um die Positionierung zu betonen:

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 3px solid #666;
  transition: transform 0.3s ease;
}

.left-image {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: #f0f0f0;
}

.right-image {
  position: relative;
  bottom: 30px;
  right: -40px;
  background-color: #e0e0e0;
}

/* Füge einen Hover-Effekt hinzu, um die Positionierung zu visualisieren */
.left-image:hover,
.right-image:hover {
  transform: scale(1.05);
}

Wichtige Prüfungspunkte:

Die Bilder sind relativ zu ihren ursprünglichen Positionen positioniert
Der Container behält ein einheitliches Layout bei
Hover-Effekte helfen, die Positionierung zu visualisieren

Beispielhafte visuelle Ausgabe:

[Zwei Bilder, die unterschiedlich innerhalb eines zentrierten Containers positioniert sind,
 mit subtilen Hover-Effekten, um ihre Positionen zu betonen]

Diese abschließende Gestaltung demonstriert die Macht der relativen Positionierung bei der Erstellung flexibler und dynamischer Layouts.

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man CSS relative Positionierung anwendet, indem man einen strukturierten Web-Projekt von Grund auf erstellt. Der Prozess umfasste das Einrichten eines HTML-Projektverzeichnisses, das Erstellen einer index.html-Datei mit Bildplatzhaltern und das Herunterladen von Beispielbildern, um Positionierungstechniken zu demonstrieren.

Das Lab führte die Lernenden durch das Erstellen eines grundlegenden CSS-Stylesheets, das Etablieren von grundlegenden Styling-Prinzipien und die Vorbereitung der Grundlage für die Implementierung der relativen Positionierung für linke und rechte Bilder. Indem die Teilnehmer den Schritt-für-Schritt-Anweisungen folgten, erhielten sie praktische Erfahrungen bei der Verwaltung von Web-Layout-Elementen und dem Verständnis, wie CSS-Positionierung verwendet werden kann, um die Platzierung von Bildern innerhalb eines Containers zu steuern.