Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen

Eskere Guru

Möchten Sie Ihre Designfähigkeiten verbessern und die Benutzererfahrung auf Ihrer Website verbessern? Es ist einfacher, wenn Sie die verschiedenen CSS-Methoden zum Positionieren von Elementen vollständig verstehen. Sie können eine erstaunliche Webseite mit einem grundlegenden Verständnis von Webdesign erstellen. Das Hauptproblem tritt jedoch auf, wenn Ihr Webprojekt detailorientierter wird, insbesondere wenn es eine komplexe Ausrichtung von On-Page-Elementen erfordert.

Glücklicherweise können Sie die Funktionalität Ihrer Website verbessern und Ihren Arbeitsablauf beschleunigen, indem Sie die richtige CSS-Positionierung verwenden. Lassen Sie uns verschiedene CSS-Positionierungseigenschaften untersuchen und die verschiedenen Layouts überprüfen, die Sie zum Erstellen einer modernen Webseite verwenden können.

Was ist die CSS-Positionseigenschaft?

Die CSS-Eigenschaft position definiert die Position eines Elements. Sie können die Position eines Elements mit den Eigenschaften left , right , top , bottom und z-index bearbeiten. Obwohl Sie CSS Flexbox oder CSS Grid verwenden können , um symmetrische Websites zu erstellen, helfen Ihnen Positionseigenschaften beim Erstellen asymmetrischer Websites, indem jedes Element von anderen Elementen getrennt wird.

Mit anderen Worten, die CSS-Eigenschaft position ermöglicht es Elementen, sich in einem Dokument frei zu bewegen.

Die Syntax für die CSS-Eigenschaft position lautet:

 position: value;

Hier sind die fünf Werte, die die Positionseigenschaft annehmen kann:

  1. statisch
  2. relativ
  3. absolut
  4. Fest
  5. klebrig

HINWEIS: Sie können Elemente mit den Eigenschaften left, right, top und bottom positionieren. Diese Eigenschaften verhalten sich jedoch je nach Positionswert unterschiedlich.

Statische CSS-Positionierung

Statisch ist die Standardposition für HTML-Elemente. Schauen wir uns ein Beispiel-HTML an, um es zu verstehen:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS Position Property</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div class="parent_container utility-flex">
 <div class="child_1 utility-flex">Child 01</div>
 <div class="child_2 utility-flex">Child 02</div>
 <div class="child_3 utility-flex">Child 03</div>
 </div>
 </body>
 </html>

Wir haben drei Kinder in einen Elterncontainer gelegt. Wir werden dieses Beispiel verwenden, um mit den verschiedenen Positionseigenschaften herumzuspielen. Hier ist das Basis-CSS, das jedes unserer Beispiele verwendet:

 .utility-flex {
 display: flex;
 justify-content: center;
 align-items: center;
 }

 .parent_container {
 background: rgb(255, 187, 98);
 padding: 10px;
 width: 600px;
 height: 400px;
 }

 .child_1,
 .child_2,
 .child_3 {
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 font-weight: 600;
 background: #e961ee;
 border: 5px solid rgb(255, 255, 255);
 width: 300px;
 height: 100px;
 color: rgb(238, 238, 238);
 border-radius: 5px;
 margin: 5px;
 }

Nun fügen wir position: static zum zweiten untergeordneten Element mit den Eigenschaften unten und rechts hinzu.

 .child_2 {
 position: static;
 bottom: 40px;
 right: 50px;
 border: 8px solid purple;
 }

Hier ist das Ergebnis:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Static Positioning

Wie Sie sehen, gilt die border-Eigenschaft, aber es gibt keinen Unterschied in der zweiten untergeordneten Positionierung. Wenn Sie keine CSS-Positionseigenschaft anwenden, wird Static als Standardwert verwendet. Dadurch wird ein Element gemäß dem Standardseitenfluss positioniert. Jedes Element mit einer statischen Position ignoriert die Eigenschaften left, right, top, bottom und z-index.

Relative CSS-Positionierung

Bei der relativen Positionierung verhält sich ein Element zunächst wie bei der statischen Positionierung. Aber jetzt funktionieren die Eigenschaften left, right, top, bottom und z-index, indem sie das ausgewählte Element von seiner ursprünglichen Position in die angegebene Richtung verschieben.

Ändern wir den Positionswert des zweiten untergeordneten Elements von statisch in relativ mit denselben top- und bottom-Eigenschaften wie zuvor.

 .child_2 {
 position: relative;
 bottom: 40px;
 right: 50px;
 border: 8px solid purple;
 }

Hier ist das Ergebnis:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Relative Positioning

Wie Sie sehen, wird das zweite Kind um 40 px von unten (nach oben) und 50 px von rechts (nach links) verschoben.

Absolute CSS-Positionierung

Jedes Element mit absoluter Positionierung wird aus dem normalen Fluss des Dokuments entfernt. Andere Elemente verhalten sich so, als ob dieses Element im Dokument nicht vorhanden wäre. Die endgültige Position des Elements wird durch die Eigenschaften top, bottom, left und right bestimmt.

Beachten Sie, dass ein Element mit absoluter Positionierung relativ zu seinem am nächsten positionierten (nicht statischen) Vorfahren positioniert wird. Wenn kein positionierter Vorfahre vorhanden ist, wird er relativ zum ursprünglichen umschließenden Block positioniert.

Lassen Sie uns dies anhand von zwei Beispielen verstehen. Zuerst ein absolut positioniertes Kind ohne positionierten Vorfahren:

 .parent_container {
 background: rgb(255, 187, 98);
 padding: 10px;
 width: 600px;
 height: 400px;
 margin: auto;
 }

 .child_2 {
 position: absolute;
 bottom: 190px;
 right: 500px;
 border: 8px solid purple;
 }

Hier ist das Ergebnis:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Absolute Positioning 1 1

In diesem zweiten Beispiel hat der übergeordnete Container eine nicht statische Position:

 .parent_container {
 background: rgb(255, 187, 98);
 padding: 10px;
 width: 600px;
 height: 400px;
 margin: auto;
 position: relative;
 }

 .child_2 {
 position: absolute;
 bottom: 20px;
 right: 150px;
 border: 8px solid purple;
 }

Das Kind ist nun in Bezug auf seinen Behälter positioniert:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Absolute Positioning 2

CSS feste Positionierung

Ein Element mit einer festen Position wird ebenfalls aus dem normalen Fluss des Dokuments entfernt. Für dieses Element ist im gesamten Seitenlayout kein Platz geschaffen. Es wird relativ zum anfänglichen umschließenden Block positioniert, der vom Ansichtsfenster festgelegt wurde (außer wenn für einen seiner Vorgänger eine Filter-, Transformations- oder Perspektiveneigenschaft auf einen anderen Wert als keiner gesetzt ist). Die Eigenschaften top, left, right und bottom bestimmen die endgültige Position des Elements.

Lassen Sie uns unser bestehendes Beispiel optimieren, indem wir weitere Kinder hinzufügen. Zuvor haben wir die Höhe des übergeordneten Containers festgelegt. Entfernen wir es und legen Sie flex-direction: column so fest, dass unser flex-Container groß genug ist, um nach unten zu scrollen und das Ergebnis zu visualisieren. Fügen Sie nun dem zweiten untergeordneten Element eine feste Positionseigenschaft hinzu, wie unten gezeigt:

 .utility-flex {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }

 .parent_container {
 background: rgb(255, 187, 98);
 padding: 10px;
 width: 600px;
 /* height: 400px; */
 margin: auto;
 /* position: relative; */
 }

 .child_2 {
 position: fixed;
 bottom: 300px;
 right: 100px;
 border: 8px solid purple;
 }

Hier ist das Ergebnis:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Fixed Positioning

Scrollen hat also keinen Einfluss auf die Position des zweiten Kindes. Seine Position ist relativ zum anfänglichen umschließenden Block festgelegt, der vom Ansichtsfenster festgelegt wurde. Gelegentlich können scrollende Elemente zu Leistungs- und Barrierefreiheitsproblemen führen. Sie können eine barrierefreie Website mit semantischem HTML und CSS erstellen .

CSS-Sticky-Positionierung

Ein Element mit klebriger Positionierung besitzt gemischte Eigenschaften von relativer und fester Positionierung. Ein fest positioniertes Element folgt den relativen Positionierungseigenschaften, bis es den angegebenen Schwellenwert überschreitet. Danach verhält es sich so, als ob es fixiert wäre, bis es die Grenze seines Elternteils erreicht.

Sie können den Schwellenwert mit den Eigenschaften left, right, top und bottom angeben. Ohne Schwellenwert verhält sich das Element so, als ob es eine relative Positionierung hätte.

Lassen Sie uns die zweite untergeordnete Position mit einem oberen Schwellenwert auf sticky setzen:

 .child_2 {
 position: sticky;
 top: 0px;
 border: 8px solid purple;
 }

Hier ist das Ergebnis:

Verstehen Sie die CSS-Eigenschaft Position mit praktischen Beispielen - CSS Sticky Property 1

Wie Sie sehen, verhält sich das zweite Kind beim Scrollen wie die anderen Kinder. Erreicht es aber den Schwellenwert (oben: 0px), verhält es sich wie fixiert und verlässt den normalen Dokumentenfluss. Sie können eine Navigationsleiste mit Sticky-Positionierung an der Kopfzeile festhalten.

Abschluss

Die CSS-Positionseigenschaft ist eine fortgeschrittene Webdesign-Fähigkeit. Es erfordert einiges Lernen, aber Sie müssen nur mit verschiedenen Werten, Ergebnissen und Ausnahmen herumspielen. Denken Sie daran, dass nichts besser ist als die Praxis, wenn es um die Erstellung eines fantastischen Webdesigns geht. Also übe weiter und du wirst besser. Viel Spaß beim Codieren!