Erstelle ein Layout mit fixer Positionierung in CSS

Einführung

In diesem Lab lernst du, wie du mithilfe von CSS ein Layout mit fixierter Positionierung erstellst, eine leistungsstarke Technik, um die Platzierung von Elementen auf einer Webseite beizubehalten. Das Lab führt dich durch das Verständnis des Konzepts der fixen Positionierung, das Einrichten einer HTML-Projektstruktur und das Anwenden der fixen Positionierung auf Seitenwerbung, während du erkennst, wie Elemente während des Seiteneinrollens stehenbleiben können.

Indem du den Schritt-für-Schritt-Anweisungen folgst, wirst du praktische Kenntnisse im Umgang mit CSS-Positionierungseigenschaften wie position: fixed erwerben und lernen, wie du die Platzierung von Elementen mit den Eigenschaften top, bottom, left und right präzise steuern kannst. Das Lab bietet praktische Erfahrungen bei der Erstellung von responsiven und visuell einheitlichen Layouts, die ihre Position unabhängig vom Seiteneinrollen beibehalten.

Verständnis des Konzepts der fixen Positionierung

In diesem Schritt lernst du über die fixe Positionierung in CSS, eine leistungsstarke Layout-Technik, die es Elementen ermöglicht, an einem festen Ort auf dem Bildschirm zu bleiben, unabhängig von der Scrollbewegung.

Die fixe Positionierung ist eine CSS-Positionierungs-Methode, die ein Element an genau demselben Ort auf dem Bildschirm belässt, auch wenn die Seite scrolled wird. Im Gegensatz zu anderen Positionierungs-Methoden bewegt sich ein fixiertes Element nicht, wenn der Benutzer die Seite scrollt.

Lassen Sie uns das grundlegende Konzept anhand eines einfachen Beispiels erkunden:

<!doctype html>
<html>
  <head>
    <style>
      .fixed-element {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #f1f1f1;
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="fixed-element">I'm a fixed element that stays in place!</div>
    <div style="height: 2000px;">
      Scroll down to see the fixed element remain in position
    </div>
  </body>
</html>

Wichtige Merkmale der fixen Positionierung:

Verwendet position: fixed; in CSS
Positioniert relativ zum Browser-Fenster
Bewegt sich nicht, wenn die Seite scrolled wird
Kann mit den Eigenschaften top, bottom, left und right präzise platziert werden

Beispielausgabe beim Anzeigen im Browser:

Das .fixed-element bleibt immer 20 Pixel vom oberen und rechten Rand des Bildschirms entfernt
Selbst wenn Sie nach unten scrollen, bleibt dieses Element an genau demselben Bildschirmort

Aufbau der HTML-Projektstruktur

In diesem Schritt erstellst du die Projektstruktur für unsere Demonstration des Layouts mit fixer Positionierung. Wir werden ein einfaches HTML-Projekt im Verzeichnis ~/project einrichten, das als Grundlage für unsere CSS-Positionierungsübung dienen wird.

Navigiere zunächst zum Projektverzeichnis und erstelle die erforderlichen Dateien:

cd ~/project
mkdir fixed-positioning-demo
cd fixed-positioning-demo

Erstelle nun die grundlegende HTML-Dateistruktur:

touch index.html
touch styles.css

Öffne die Datei index.html und füge die folgende grundlegende HTML-Struktur hinzu:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>This is a sample page to demonstrate fixed positioning in CSS.</p>

      <!-- We'll add more content in subsequent steps -->
    </div>
  </body>
</html>

Erstelle eine grundlegende CSS-Datei styles.css mit einigen initialen Stilen:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

Beispielausgabe der Struktur:

~/project/fixed-positioning-demo/
├── index.html
└── styles.css

Diese Einrichtung bietet eine saubere, einfache Projektstruktur, auf der wir in den folgenden Schritten aufbauen werden, um die Techniken der fixen Positionierung zu demonstrieren.

Fixierte Positionierung für Seitenwerbung anwenden

In diesem Schritt lernst du, wie du mit CSS fixierte Seitenwerbung erstellst. Wir werden die Dateien index.html und styles.css ändern, um Seitenwerbungs-Elemente hinzuzufügen, die beim Scrollen an ihrem Platz bleiben.

Aktualisiere die Datei index.html, um Seitenwerbungs-Elemente hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Side Ad</h3>
      <p>This ad stays in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Side Ad</h3>
      <p>Another fixed advertisement</p>
    </div>

    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>Scroll down to see how the side advertisements remain fixed.</p>

      <!-- Add more content to create scrolling effect -->
      <div style="height: 2000px;">Long content to demonstrate scrolling</div>
    </div>
  </body>
</html>

Ändere die Datei styles.css, um die fixe Positionierung auf die Werbung anzuwenden:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.left-ad,
.right-ad {
  position: fixed;
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.left-ad {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.right-ad {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

Wichtige Punkte zur fixen Positionierung:

position: fixed; hält die Werbung an einem konstanten Ort
Die Eigenschaften left und right positionieren die Werbung auf den Seiten des Bildschirms
top: 50% und transform: translateY(-50%) zentrieren die Werbung vertikal

Beispielausgabe im Browser:

Zwei Seitenwerbungen erscheinen fix auf dem Bildschirm
Die Werbungen bleiben an ihrem Platz, wenn die Seite scrolled wird
Die Werbungen sind vertikal auf dem Bildschirm zentriert

Elementplatzierung mit den Eigenschaften top und right anpassen

In diesem Schritt lernst du, wie du die Platzierung von fixierten Elementen mit den Eigenschaften top, right, bottom und left präzise steuern kannst. Mit diesen CSS-Eigenschaften kannst du fixierte Elemente genau an dem gewünschten Ort auf dem Bildschirm positionieren.

Aktualisiere die Datei styles.css, um verschiedene Positionierungstechniken zu demonstrieren:

/* Die vorherigen Stile bleiben gleich */

.left-ad {
  position: fixed;
  top: 20px; /* 20 Pixel vom oberen Rand des Bildschirms */
  left: 20px; /* 20 Pixel vom linken Rand des Bildschirms */
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.right-ad {
  position: fixed;
  top: 50%; /* Vertikal zentriert */
  right: 20px; /* 20 Pixel vom rechten Rand des Bildschirms */
  width: 150px;
  transform: translateY(-50%); /* Anpassen für perfekte Zentrierung */
  background-color: #e4e4e4;
  padding: 10px;
  border: 1px solid #ccc;
}

.bottom-ad {
  position: fixed;
  bottom: 20px; /* 20 Pixel vom unteren Rand des Bildschirms */
  left: 50%; /* Horizontal zentriert */
  width: 300px;
  transform: translateX(-50%); /* Anpassen für perfekte Zentrierung */
  background-color: #d4d4d4;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbb;
}

Aktualisiere die index.html, um die neue untere Werbung hinzuzufügen:

<body>
  <div class="left-ad">
    <h3>Left Side Ad</h3>
    <p>Positioned 20px from top-left</p>
  </div>

  <div class="right-ad">
    <h3>Right Side Ad</h3>
    <p>Vertically centered</p>
  </div>

  <div class="bottom-ad">
    <h3>Bottom Ad</h3>
    <p>Centered at the bottom of the screen</p>
  </div>

  <div class="content">
    <h1>Fixed Positioning Layout</h1>
    <p>Explore different positioning techniques</p>

    <div style="height: 2000px;">Scroll to see fixed elements</div>
  </div>
</body>

Erläuterung der wichtigen Positionierungseigenschaften:

top: Entfernung vom oberen Rand des Bildschirms
right: Entfernung vom rechten Rand des Bildschirms
bottom: Entfernung vom unteren Rand des Bildschirms
left: Entfernung vom linken Rand des Bildschirms
transform: Feinjustierung der Positionierung für perfekte Zentrierung

Beispielausgabe im Browser:

Linke Werbung: 20 Pixel vom oberen linken Eck
Rechte Werbung: Vertikal zentriert auf der rechten Seite
Untere Werbung: Zentriert am unteren Rand des Bildschirms
Alle Elemente bleiben beim Scrollen fix

Testen des Scrollverhaltens von fixen Elementen

In diesem Schritt erkundest du das einzigartige Scrollverhalten von fixierten Elementen, indem du mehr Inhalt hinzufügst, um zu zeigen, wie diese Elemente während des Seitenscrolls stehenbleiben.

Aktualisiere die Datei index.html, um mehr Inhalt für das Scrollen hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Scroll Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Ad</h3>
      <p>I stay in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Ad</h3>
      <p>Always visible</p>
    </div>

    <div class="bottom-ad">
      <h3>Bottom Ad</h3>
      <p>Fixed at bottom</p>
    </div>

    <div class="content">
      <h1>Scrolling Behavior Demonstration</h1>

      <div class="scroll-content">
        <h2>Scroll Down to See Fixed Elements</h2>

        <!-- Create long content to enable scrolling -->
        <div class="long-content">
          <h3>Long Content Section</h3>
          <p>
            This section will allow you to scroll and observe how fixed-position
            elements remain in place.
          </p>

          <!-- Repeat paragraphs to create scrollable content -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
            dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
          </p>

          <!-- Add multiple repetitions to create significant scroll length -->
          <p>
            Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in
            nulla enim. Phasellus molestie magna non est bibendum non venenatis
            nisl tempor.
          </p>

          <!-- Repeat similar paragraphs multiple times -->
          <p>
            Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
            posuere. Praesent id metus massa, ut blandit odio.
          </p>

          <!-- Continue adding paragraphs to create scroll effect -->
          <p>
            Proin quis tortor orci. Etiam at risus et justo dignissim congue.
            Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
          </p>

          <!-- More paragraphs to extend scrolling -->
          <p>
            Nunc dignissim risus id metus. Cras ornare tristique elit. Vivamus
            vestibulum nulla sit amet tristique reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Aktualisiere die styles.css, um die Scroll-Demonstration zu verbessern:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.long-content {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Die vorherigen fixen Positionierungsstile bleiben gleich */

Wichtige Beobachtungen zur fixen Positionierung:

Fixierte Elemente bleiben an derselben Bildschirmposition
Das Scrollen hat keinen Einfluss auf ihre Platzierung
Die Elemente bleiben sichtbar, unabhängig von der Scrollposition der Seite

Beispielhaftes Scrollverhalten:

Linke, rechte und untere Werbungen bleiben stehen
Der Inhalt scrollt hinter den fixen Elementen
Fixierte Elemente sind immer auf dem Bildschirm sichtbar

Zusammenfassung

In diesem Lab haben die Teilnehmer das Thema fixe Positionierung in CSS kennengelernt, eine leistungsstarke Layout-Technik, die es ermöglicht, Elemente auf dem Bildschirm stehenzubleiben, unabhängig davon, wie die Seite scrolled wird. Mit der Eigenschaft position: fixed können Entwickler Elemente erstellen, die an einem konstanten Ort bleiben, wie z. B. Seitenwerbungen oder Navigationsmenüs, die auch dann sichtbar bleiben, wenn die Benutzer durch den Inhalt scrollen.

Das Lab hat die Teilnehmer dabei unterstützt, ein praktisches Beispiel für die fixe Positionierung zu erstellen, einschließlich des Aufbaus einer HTML-Projektstruktur und der Anwendung von CSS-Eigenschaften wie top und right, um die Elementplatzierung präzise zu steuern. Die Teilnehmer haben die wichtigsten Eigenschaften der fixen Positionierung erkundet, wie ihre Bezugnahme auf das Browserfenster und ihre Fähigkeit, eine konstante Bildschirmposition beizubehalten, und dabei praktische Erfahrungen mit dieser wichtigen CSS-Layout-Technik gemacht.