Die mit Beispielen erläuterte CSS-Positionseigenschaft

Bevor Sie wirklich gut in CSS sein können, müssen Sie die Grundlagen verstehen. Sie müssen die CSS-Eigenschaften und ihre Werte verstehen.

In diesem Artikel konzentrieren wir uns auf die CSS-Positionseigenschaft. Wir werden die verschiedenen Werte der CSS-Positionseigenschaft und ihre Funktionsweise kennenlernen. Lass uns das machen!

Was ist die CSS-Positionseigenschaft?

Die CSS-Positionseigenschaft definiert die Position eines Elements in einem Dokument. Diese Eigenschaft arbeitet mit den Eigenschaften left, right, top, bottom und z-index zusammen, um die endgültige Position eines Elements auf einer Seite zu bestimmen.

Es gibt fünf Werte, die die Positionseigenschaft annehmen kann. Sie sind:

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

Lassen Sie uns jeden einzelnen von ihnen diskutieren.

Statisch

Dies ist der Standardwert für Elemente. Das Element wird gemäß dem normalen Fluss des Dokuments positioniert. Die Eigenschaften left, right, top, bottom und z-index wirken sich nicht auf ein Element mit aus position: static.

Lassen Sie uns position: staticanhand eines Beispiels zeigen, dass dies keinen Einfluss auf die Position eines Elements hat. Wir haben drei Divs in einem übergeordneten Container platziert. Wir werden dieses Beispiel in diesem Artikel verwenden.

 I'm the other sibling element. All eyes on me. I am the main element. I'm the other sibling element. 

Fügen wir position: staticdem div mit der Klasse main-elementund den linken oberen Werten hinzu. Wir fügen den anderen Divs auch einige Stile hinzu, um sie von dem fokussierten Element zu unterscheiden.

.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }

Das ist das Ergebnis.

Haben Sie bemerkt, dass sich nichts ändert? Dies bestätigt die Tatsache, dass die Eigenschaften left und bottom ein Element mit nicht beeinflussen position: static.

Gehen wir zum nächsten Wert über.

Relativ

Elemente mit position: relativebleiben im normalen Ablauf des Dokuments. Im Gegensatz zu statischen Elementen wirken sich die Eigenschaften des linken, rechten, oberen, unteren und Z-Index auf die Position des Elements aus. Ein Versatz, der auf den Werten der Eigenschaften left, right, top und bottom basiert, wird relativ zu sich selbst auf das Element angewendet.

Lassen Sie uns ersetzen position: staticmit position: relativein unserem Beispiel.

.main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }

Beachten Sie, dass die Eigenschaften left und bottom jetzt die Position des Elements beeinflussen. Beachten Sie auch, dass das Element im normalen Fluss des Dokuments verbleibt und der Versatz relativ zu sich selbst angewendet wird. Beachten Sie dies, wenn wir zu anderen Werten übergehen.

Absolut

Elemente mit position: absolutewerden relativ zu ihren übergeordneten Elementen positioniert. In diesem Fall wird das Element aus dem normalen Dokumentenfluss entfernt. Die anderen Elemente verhalten sich so, als ob sich dieses Element nicht im Dokument befindet. Im Seitenlayout wird kein Platz für das Element erstellt. Die Werte links, oben, unten und rechts bestimmen die endgültige Position des Elements.

Zu beachten ist, dass ein Element mit position: absoluterelativ zu seinem am nächsten positionierten Vorfahren positioniert ist. Das bedeutet, dass das übergeordnete Element einen anderen Positionswert als haben muss position: static.

Wenn das nächstgelegene übergeordnete Element nicht positioniert ist, wird es relativ zum nächsten übergeordneten Element positioniert, das positioniert ist. Wenn kein positioniertes Vorfahrenelement vorhanden ist, wird es relativ zum Element positioniert .

Kehren wir zu unserem Beispiel zurück. In diesem Fall ändern wir die Position des Hauptelements in position: absolute. Wir geben dem übergeordneten Element auch eine relative Position, damit es nicht relativ zum Element positioniert wird .

.main-element { position: absolute; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } .sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } 

Hier ist das Ergebnis.

Beachten Sie, dass im Dokument kein Platz für das Element erstellt wurde. Das Element ist jetzt relativ zum übergeordneten Element positioniert. Beachten Sie dies, wenn wir zum nächsten Wert übergehen.

Fest

Feste Positionselemente ähneln absolut positionierten Elementen. Sie werden auch aus dem normalen Fluss des Dokuments entfernt. Im Gegensatz zu absolut positionierten Elementen sind sie jedoch immer relativ zum Element positioniert .

Zu beachten ist, dass feste Elemente vom Scrollen nicht betroffen sind. Sie bleiben immer an der gleichen Position auf dem Bildschirm.

.main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } html { height: 800px; }

In diesem Fall wird das Element relativ zum Element positioniert . Versuchen Sie zu scrollen, um zu sehen, dass das Element auf dem Bildschirm fixiert wird.

Gehen wir zum Endwert über.

Klebrig

position: stickyist eine Mischung aus position: relativeund position: fixed. Es wirkt bis zu einem bestimmten Bildlaufpunkt wie ein relativ positioniertes Element und dann wie ein festes Element. Haben Sie keine Angst, wenn Sie nicht verstehen, was dies bedeutet. Das Beispiel hilft Ihnen, es besser zu verstehen.

.main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }

Scrollen Sie auf der Registerkarte Ergebnis, um das Ergebnis anzuzeigen. Sie sehen, dass es als relatives Element fungiert, bis es einen bestimmten Punkt auf dem Bildschirm erreicht, top: 10pxund dann wie ein festes Element dort ankommt.

Zusammenfassung

Hoppla! Das war eine ziemliche Fahrt. Ich hoffe jedoch sehr, dass dieser Artikel Ihnen geholfen hat, die CSS-Positionseigenschaft und ihre Funktionsweise zu verstehen.

Feel free to play around with the fiddles if you don't fully understand any of them. You can change the values and notice the difference or better still, try to use the position property to work on a personal project.

Remember that getting better at CSS takes constant practice. So keep practicing and you'll get better.

Want to get notified when I publish a new article? Click here.