Elemente in CSS absolut positionieren

Einführung

In diesem Lab lernen die Studierenden, wie sie CSS-Absolutpositionierung verwenden, um die Layoutierung von Webselemente präzise zu steuern. Das Lab führt die Teilnehmer durch die Einrichtung einer Projektumgebung, das Herunterladen von Bildern, das Erstellen einer HTML-Struktur und die Anwendung von Absolutpositionierungstechniken, um die Bildplatzierung zu manipulieren.

Die Teilnehmer beginnen mit der Erstellung eines strukturierten Projektdirektors, der Einrichtung eines HTML5-Vorlagens und der Vorbereitung einer CSS-Datei mit grundlegenden Reset-Stilen. Durch praktische Schritte werden die Lernenden erkunden, wie sie Elemente unabhängig vom normalen Dokumentfluss positionieren können, und erwerben praktische Kenntnisse bei der Erstellung komplexer und dynamischer Web-Layouts mit CSS-Absolutpositionierung.

Projektumgebung einrichten

In diesem Schritt richten Sie die Projektumgebung für das Lernen der CSS-Absolutpositionierung ein. Wir werden ein spezielles Projektdirektorium erstellen und die erforderlichen Dateien für unser Lab vorbereiten.

Beginnen wir zunächst damit, in das Projektdirektorium zu navigieren und einen neuen Ordner für unser CSS-Positionierungsprojekt zu erstellen:

cd ~/project
mkdir css-positioning-lab
cd css-positioning-lab

Erstellen wir nun die grundlegende Projektstruktur. Wir werden eine index.html-Datei und ein styles-Verzeichnis erstellen, um unsere CSS-Dateien zu organisieren:

mkdir styles
touch index.html styles/main.css

Überprüfen wir die Verzeichnisstruktur:

tree

Beispielausgabe:

.
├── index.html
└── styles
    └── main.css

Öffnen Sie die index.html-Datei in der WebIDE. Wir werden eine grundlegende HTML5-Struktur hinzufügen, um uns auf das CSS-Positionierungslab vorzubereiten:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- Wir werden im nächsten Schritt Inhalte hinzufügen -->
  </body>
</html>

Öffnen Sie ähnlich die styles/main.css-Datei und fügen Sie einen grundlegenden Reset hinzu, um die Standardbrowserformatierung zu entfernen:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Diese ersten Einrichtungs-Schritte schaffen eine saubere und organisierte Umgebung für unser CSS-Absolutpositionierungslab. Im nächsten Schritt werden wir Bilder herunterladen und unsere Positionierungstechniken implementieren.

Benötigte Bilder herunterladen

In diesem Schritt laden Sie die Bilder herunter, die wir verwenden werden, um die CSS-Absolutpositionierung zu demonstrieren. Wir werden ein images-Verzeichnis erstellen und Beispielbilder mit wget herunterladen.

Navigieren Sie zunächst zum Projektdirektorium und erstellen Sie einen images-Ordner:

cd ~/project/css-positioning-lab
mkdir images
cd images

Lassen Sie uns nun einige Beispielbilder herunterladen. Wir werden Platzhalterbilder von Lorem Picsum verwenden, die zufällige Bilder für Demonstrationszwecke zur Verfügung stellen:

wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpg

Überprüfen wir die heruntergeladenen Bilder:

ls -l

Beispielausgabe:

total 180
-rw-r--r-- 1 labex labex 59973 Jun  1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun  1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun  1 10:00 image3.jpg

Überprüfen Sie die Dateigrößen und bestätigen Sie, dass drei verschiedene Bilder erfolgreich heruntergeladen wurden. Diese Bilder werden im nächsten Schritt verwendet, um Absolutpositionierungstechniken in CSS zu demonstrieren.

HTML-Struktur erstellen

In diesem Schritt erstellen Sie die HTML-Struktur zur Demonstration der Absolutpositionierung. Wir werden die index.html-Datei ändern, um einen Container mit mehreren Bildern zu enthalten, die wir absolut positionieren werden.

Öffnen Sie die index.html-Datei in der WebIDE und ersetzen Sie ihren Inhalt durch folgenden Code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img src="images/image1.jpg" alt="Bild 1" class="positioned-image" />
        <img src="images/image2.jpg" alt="Bild 2" class="positioned-image" />
        <img src="images/image3.jpg" alt="Bild 3" class="positioned-image" />
      </div>
    </div>
  </body>
</html>

Aktualisieren Sie nun die styles/main.css-Datei, um die grundlegende Formatierung für unsere Positionierungsdemonstration einzurichten:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid rot;
}

Zergliedern wir die HTML-Struktur:

Wir haben einen Container-Div mit der Klasse positioning-container erstellt
Darin befindet sich ein image-wrapper-Div
Drei Bilder werden hinzugefügt, jedes mit der Klasse positioned-image

Die CSS bietet eine grundlegende Einrichtung:

Der Container wird auf eine feste Größe mit einem Rand gesetzt
position: relative wird auf den Container angewendet
Die Bilder haben eine feste Größe und einen roten Rand für die Sichtbarkeit

Absolute Positionierung auf Bilder anwenden

In diesem Schritt lernen Sie, wie Sie CSS-Absolutpositionierung verwenden, um Bilder innerhalb eines Containers genau zu platzieren. Mit Absolutpositionierung können Sie Elemente genau dort positionieren, wo Sie möchten, relativ zu ihrem nächsten positionierten Vorfahren.

Öffnen Sie die styles/main.css-Datei und ändern Sie die CSS, um die Absolutpositionierung auf die Bilder anzuwenden:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid rot;
  position: absolute;
}

/* Positionierung für einzelne Bilder */
#image1 {
  top: 0;
  left: 0;
}

#image2 {
  top: 100px;
  right: 0;
}

#image3 {
  bottom: 0;
  left: 150px;
}

Aktualisieren Sie nun die index.html-Datei, um eindeutige IDs zu den Bildern hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img
          src="images/image1.jpg"
          alt="Bild 1"
          id="image1"
          class="positioned-image"
        />
        <img
          src="images/image2.jpg"
          alt="Bild 2"
          id="image2"
          class="positioned-image"
        />
        <img
          src="images/image3.jpg"
          alt="Bild 3"
          id="image3"
          class="positioned-image"
        />
      </div>
    </div>
  </body>
</html>

Wichtige Punkte zur Absolutpositionierung:

position: absolute nimmt das Element aus dem normalen Dokumentfluss heraus
Positioniert relativ zu ihrem nächsten positionierten Vorfahren (in diesem Fall dem .positioning-container)
Die Eigenschaften top, bottom, left und right steuern die genaue Platzierung
Jedes Bild wird unterschiedlich positioniert, um die Flexibilität der Absolutpositionierung zu demonstrieren

Beispiel-Layout:

Das erste Bild (image1) ist in der oberen linken Ecke positioniert
Das zweite Bild (image2) ist 100px von oben entfernt und rechts ausgerichtet
Das dritte Bild (image3) ist unten positioniert, 150px von links entfernt

Absolutpositionierungslayout überprüfen

In diesem letzten Schritt überprüfen Sie das Absolutpositionierungslayout und verstehen, wie die Bilder innerhalb des Containers positioniert sind. Öffnen Sie die index.html-Datei in einem Webbrowser, um das Ergebnis Ihrer CSS-Absolutpositionierung zu sehen.

Schauen wir uns die wichtigsten Aspekte der Absolutpositionierung an, die wir implementiert haben:

Containerpositionierung

.positioning-container {
  position: relative; /* Erstellt einen Positionierungskontext */
  width: 500px;
  height: 500px;
}

Bildpositionierung

.positioned-image {
  position: absolute; /* Nimmt die Bilder aus dem normalen Dokumentfluss heraus */
  width: 200px;
  height: 300px;
}

#image1 {
  top: 0;
  left: 0;
} /* Obere linke Ecke */
#image2 {
  top: 100px;
  right: 0;
} /* 100px von oben, rechts ausgerichtet */
#image3 {
  bottom: 0;
  left: 150px;
} /* Unten, 150px von links */

Beobachten Sie, wie die Bilder positioniert sind:

Jedes Bild ist genau innerhalb des 500x500px-Containers platziert
Die Bilder überlappen die Grenzen des Containers nicht
Die Positionierung wird durch die Eigenschaften top, bottom, left und right gesteuert

Um weitere Experimente durchzuführen, versuchen Sie, die Positionierungswerte in der CSS zu ändern, um zu sehen, wie sich dies auf das Bildlayout auswirkt.

Zusammenfassung

In diesem Lab lernen die Teilnehmer die Grundlagen der CSS-Absolutpositionierung, indem sie eine strukturierte Webanwendungsentwicklungumgebung einrichten. Die ersten Schritte umfassen das Erstellen eines dedizierten Projektdirektories mit einem klaren Dateistruktur, einschließlich einer index.html-Datei und eines styles-Ordners, und die Implementierung eines grundlegenden CSS-Resets, um eine konsistente Formatierung über verschiedene Browser zu gewährleisten.

Das Lab führt die Lernenden durch die Einrichtung eines sauberen Projekts, die Vorbereitung von HTML- und CSS-Dateien und die Schaffung einer Grundlage für das Erkunden von Absolutpositionierungstechniken. Indem die Teilnehmer systematische Schritte wie das Erstellen von Verzeichnissen, die Initialisierung von Dateien und die Hinzufügung von initialen HTML- und CSS-Konfigurationen befolgen, gewinnen sie praktische Erfahrungen bei der Organisation von Webanwendungsentwicklungsprojekten und der Vorbereitung auf fortgeschrittene CSS-Layouttechniken.