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!