Position

Verwenden Sie diese Helfer, um die Position eines Elements schnell zu konfigurieren.

Auf dieser Seite

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.

<div class="sticky-top">...</div>

Ansprechendes klebriges Oberteil

Responsive Variationen existieren auch für .sticky-topden Nutzen.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

Klebriger Boden

Positionieren Sie ein Element am unteren Rand des Ansichtsfensters von Kante zu Kante, aber erst, nachdem Sie daran vorbei gescrollt haben.

<div class="sticky-bottom">...</div>

Reaktionsfreudiger, klebriger Boden

Responsive Variationen existieren auch für .sticky-bottomden Nutzen.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>