Verwendung der Positionseigenschaft in CSS zum Ausrichten von Elementen

Das Positionieren von Elementen mit CSS in der Webentwicklung ist nicht so einfach, wie es scheint. Die Dinge können schnell kompliziert werden, wenn Ihr Projekt größer wird. Ohne ein gutes Verständnis dafür, wie CSS mit dem Ausrichten von HTML-Elementen umgeht, können Sie Ihre Ausrichtungsprobleme nicht beheben.

Es gibt verschiedene Möglichkeiten / Methoden zum Positionieren von Elementen mit reinem CSS. Bei Verwendung von CSS- Float sind Anzeige- und Positionseigenschaften die am häufigsten verwendeten Methoden.

In diesem Artikel werde ich eine der verwirrendsten Möglichkeiten zum Ausrichten von Elementen mit reinem CSS erläutern: die Positionseigenschaft. Ich habe hier auch ein weiteres Tutorial für CSS Display Property.

Wenn Sie möchten, können Sie sich die Videoversion des CSS Positioning Tutorial ansehen:

Lass uns anfangen...

CSS-Position und Hilfseigenschaften

So gibt es fünf Hauptwerte der Position der Immobilie :

position: static | relative | absolute | fixed | sticky

und zusätzliche Eigenschaften zum Festlegen der Koordinaten eines Elements (ich nenne sie "Hilfseigenschaften" ):

top | right | bottom | left Und das z-index

Wichtiger Hinweis : Hilfseigenschaften funktionieren nicht ohne deklarierte Position oder mit Position: statisch.

Was ist das für ein Z-Index?

Wir haben Höhe und Breite (x, y) als 2 Dimensionen. Z ist die 3. Dimension. Ein Element auf der Webseite z-indexwird mit zunehmendem Wert vor andere Elemente gestellt .

Der Z-Index funktioniert nicht mitposition: staticoder ohne deklarierte Position.

Sie können das Video auf meinem Kanal ansehen, um zu sehen, wie Sie den Z-Index genauer verwenden:

Nun lassen Sie uns mit dem Umzug auf Position Eigenschaft Werte ...

1. Statisch

position: staticist der Standardwert . Unabhängig davon, ob wir es deklarieren oder nicht, werden die Elemente auf der Webseite in normaler Reihenfolge positioniert. Geben wir ein Beispiel:

Zunächst definieren wir unsere HTML-Struktur:

Dann erstellen wir 2 Felder und definieren deren Breiten, Höhen und Positionen:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Wie wir auf dem Bild sehen können, macht die Definition der Position: statisch oder nicht keinen Unterschied.Die Felder werden gemäß dem normalen Dokumentenfluss positioniert .

2. Relativ

position: relative: Die neue Position eines Elements relativ zu seiner normalen Position.

Beginnend mit position: relativeund für alle nicht statischen PositionenWerte, sind wir in der Lage eines Elements ändern Standard unter Verwendung der Position Helfer propertie s , dass ich oben erwähnt habe.

Bewegen wir das orangefarbene Kästchen neben das blaue.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
HINWEIS: Die Verwendung von position: relative für ein Element wirkt sich nicht auf die Positionen anderer Elemente aus.

3. Absolut

In position: relativeist das Element relativ zu sich selbst positioniert . Jedoch ist eine absolute lyDas positionierte Element ist relativ zu seinem übergeordneten Element .

Ein Element mit position: absolutewird aus dem normalen Dokumentenfluss entfernt. Es wird automatisch am Startpunkt ( obere linke Ecke) des übergeordneten Elements positioniert . Wenn es keine übergeordneten Elemente enthält, ist das ursprüngliche Dokument das übergeordnete.

Da position: absolutedas Element aus dem Dokumentfluss entfernt wird, sind andere Elemente betroffen und verhalten sich so, als würde das Element vollständig von der Webseite entfernt.

Fügen wir einen Container als übergeordnetes Element hinzu:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

Jetzt sieht es so aus, als wäre die blaue Box verschwunden, aber nicht. Die blaue Box verhält sich so, als würde die orangefarbene Box entfernt, sodass sie an die Stelle der orangefarbenen Box verschoben wird.

Verschieben wir das orangefarbene Feld um 5 Pixel:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

Die Koordinaten eines absolut positionierten Elements sind relativ zu seinem übergeordneten Element , wenn das übergeordnete Element auch eine nicht statische Position hat. Andernfalls positionieren die Hilfseigenschaften das Element relativ zum Anfangsbuchstaben.

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Behoben

Ebenso position: absolutewerden fest positionierte Elemente aus dem normalen Dokumentenfluss entfernt. Die Unterschiede sind:

  • Sie beziehen sich nur auf das Dokument, nicht auf andere Eltern.
  • Sie sind vom Scrollen nicht betroffen .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Hier im Beispiel ändere ich die Position der orangefarbenen Box auf fest , und diesmal ist sie relativ 5px rechts von der, nicht sein Elternteil (Container) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!