Positie

Gebruik deze verkorte hulpprogramma's om snel de positie van een element te configureren.

Gemeenschappelijke waarden

Er zijn lessen voor snelle positionering beschikbaar, maar deze reageren niet.

<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>

Vaste top

Plaats een element bovenaan de viewport, van rand tot rand. Zorg ervoor dat u de gevolgen van een vaste positie in uw project begrijpt; het kan nodig zijn om extra CSS toe te voegen.

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

Vaste bodem

Plaats een element onderaan de viewport, van rand tot rand. Zorg ervoor dat u de gevolgen van een vaste positie in uw project begrijpt; het kan nodig zijn om extra CSS toe te voegen.

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

plakkerige bovenkant

Plaats een element bovenaan de viewport, van rand tot rand, maar pas nadat u er voorbij bent gescrold. Het .sticky-tophulpprogramma maakt gebruik van CSS's position: sticky, die niet in alle browsers volledig worden ondersteund.

IE11 en IE10 worden weergegeven position: stickyals position: relative. Als zodanig verpakken we de stijlen in een @supportsquery, waardoor de plakkerigheid wordt beperkt tot alleen browsers die deze correct kunnen weergeven.

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