Position
Verwenden Sie diese Kurzbefehle, um die Position eines Elements schnell zu konfigurieren.
Gemeinsame Werte
Kurse zur schnellen Positionierung sind verfügbar, reagieren jedoch nicht.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Festes Oberteil
Positionieren Sie ein Element von Kante zu Kante oben im Ansichtsfenster. Stellen Sie sicher, dass Sie die Auswirkungen einer festen Position in Ihrem Projekt verstehen; Möglicherweise müssen Sie zusätzliches CSS hinzufügen.
<div class="fixed-top">...</div>
Fester Boden
Positionieren Sie ein Element von Kante zu Kante am unteren Rand des Ansichtsfensters. Stellen Sie sicher, dass Sie die Auswirkungen einer festen Position in Ihrem Projekt verstehen; Möglicherweise müssen Sie zusätzliches CSS hinzufügen.
<div class="fixed-bottom">...</div>
Klebriges Oberteil
Positionieren Sie ein Element am oberen Rand des Ansichtsfensters von Kante zu Kante, aber erst, nachdem Sie daran vorbei gescrollt haben. Das .sticky-top
Dienstprogramm verwendet CSS position: sticky
, das nicht in allen Browsern vollständig unterstützt wird.
IE11 und IE10 werden position: sticky
als position: relative
. Daher verpacken wir die Stile in einer @supports
Abfrage und beschränken die Klebrigkeit auf nur Browser, die sie richtig rendern können.
<div class="sticky-top">...</div>