CSS-Positionierung – Absolut, Relativ, Fest und Sticky.

Vorlesung 11: CSS-Positionierung – Absolut, Relativ, Fest und Sticky

Willkommen zur elften Vorlesung des Kurses „Basic to Brilliance“. In dieser Vorlesung werden wir die verschiedenen Arten der CSS-Positionierung untersuchen: relativ, absolut, fest und klebrig. Wenn Sie die Positionierung verstehen, können Sie steuern, wo Elemente auf einer Seite angezeigt werden und wie sie sich verhalten, wenn Benutzer mit dem Inhalt interagieren.

---

1. Die Position verstehen Eigentum

Die Positionseigenschaft gibt an, wie ein Element im Dokument positioniert wird. Es kann die folgenden Werte annehmen:

• statisch: Standardwert. Elemente werden entsprechend dem normalen Dokumentenfluss positioniert.
• relativ: Element wird relativ zu seiner normalen Position positioniert.
• absolut: Das Element wird relativ zu seinem nächsten positionierten Vorfahren oder dem anfänglichen enthaltenden Block positioniert.
• behoben: Element wird relativ zum Browserfenster positioniert und bleibt beim Scrollen an derselben Position.
• klebrig: Das Element wird als relativ behandelt, bis es einen Schwellenwert erreicht (z. B. eine Bildlaufposition) und dann fixiert wird.

---

2. Relative Positionierung

Ein Element mit position: relative wird relativ zu seiner ursprünglichen (statischen) Position positioniert. Es bleibt im Dokumentenfluss, was bedeutet, dass andere Elemente es weiterhin berücksichtigen.

• Beispiel: Relative Positionierung zum Verschieben eines Elements verwenden.

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

In diesem Beispiel wird das Element von seiner ursprünglichen Position um 20 Pixel nach unten und um 30 Pixel nach rechts verschoben, sein Platz im Dokumentfluss bleibt jedoch erhalten.

---

3. Absolute Positionierung

Elemente mit der Position „absolut“ werden aus dem Dokumentfluss entfernt und relativ zu ihrem nächstgelegenen positionierten Vorgänger positioniert (d. h. einem Vorgänger mit einer anderen Position als statisch).

• Beispiel: Absolute Positionierung eines Elements innerhalb eines Containers.

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

In diesem Beispiel:

• Die .box ist absolut 50 Pixel von oben und 20 Pixel von rechts innerhalb des .container-Elements positioniert.
• Der .container hat position: relative, was ihn zur Positionierungsreferenz für die .box macht.

---

4. Feste Positionierung

Ein Element mit der Position „fixed“ wird relativ zum Browserfenster positioniert, unabhängig davon, wie auf der Seite gescrollt wird.

• Beispiel: Erstellen einer festen Navigationsleiste.

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

In diesem Beispiel:

• Die .navbar wird oben im Ansichtsfenster positioniert und bleibt auch beim Scrollen der Seite fixiert.

---

5. Klebrige Positionierung

Ein Element mit Position: Sticky wird als relativ behandelt, bis der Benutzer über einen definierten Schwellenwert scrollt. Ab diesem Zeitpunkt wird es fixiert.

• Beispiel: Sticky-Header, der nach dem Scrollen oben bleibt.

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

In diesem Beispiel:

• Der .header verhält sich wie ein normales Element, bis er den oberen Rand der Seite erreicht. Danach bleibt es oben hängen und bleibt sichtbar, während der Benutzer scrollt.

---

6. Z-Index

Wenn Elemente positioniert sind (entweder relativ, absolut, fest oder klebrig), können Sie ihre Stapelreihenfolge mithilfe der Z-Index-Eigenschaft steuern. Höhere Z-Index-Werte führen dazu, dass Elemente über niedrigeren angezeigt werden.

• Beispiel: Steuern der Stapelreihenfolge.

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

In diesem Beispiel:

• .box2 wird aufgrund seines höheren Z-Index-Werts über .box1 angezeigt.

---

7. Kombination von Positionierungstechniken

Sie können Positionierungswerte kombinieren, um erweiterte Layouts zu erstellen.

• Beispiel: Seitenleiste mit relativem Inhaltsbereich korrigiert.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

In diesem Layout:

• Die .sidebar ist links auf der Seite fixiert und bleibt beim Scrollen sichtbar.
• Der .content-Bereich wird relativ positioniert und passt seinen Rand an die Seitenleiste an.

---

Übungsübung

1. Erstellen Sie eine Webseite mit einer festen Kopf- und Fußzeile und verwenden Sie relative und absolute Positionierung für den Inhalt.
2. Fügen Sie eine klebrige Seitenleiste hinzu, die beim Scrollen fixiert wird.

---

Als Nächstes: In der nächsten Lektion befassen wir uns mit CSS-Transformationen und -Animationen, wo Sie lernen, wie Sie Ihre Webelemente ganz einfach animieren können. Machen Sie sich bereit, Ihre Designs dynamisch und interaktiv zu gestalten!

---

Folgen Sie mir auf LinkedIn
Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS-Positionierung – Absolut, Relativ, Fest und Sticky.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!