Posizione

Utilizzare queste utilità abbreviate per configurare rapidamente la posizione di un elemento.

Valori comuni

Sono disponibili classi di posizionamento rapido, sebbene non siano reattive.

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

Parte superiore fissa

Posiziona un elemento nella parte superiore della finestra, da bordo a bordo. Assicurati di comprendere le ramificazioni della posizione fissa nel tuo progetto; potrebbe essere necessario aggiungere CSS aggiuntivi.

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

Fondo fisso

Posiziona un elemento nella parte inferiore della finestra, da bordo a bordo. Assicurati di comprendere le ramificazioni della posizione fissa nel tuo progetto; potrebbe essere necessario aggiungere CSS aggiuntivi.

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

Parte superiore appiccicosa

Posiziona un elemento nella parte superiore della finestra, da bordo a bordo, ma solo dopo averlo superato. L' .sticky-toputilità utilizza CSS position: sticky, che non è completamente supportato in tutti i browser.

IE11 e IE10 eseguiranno il rendering position: stickycome position: relative. Pertanto, avvolgiamo gli stili in una @supportsquery, limitando la persistenza ai soli browser che possono renderla correttamente.

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