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 ulteriori CSS.
<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 ulteriori CSS.
<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-top
utilità utilizza CSS position: sticky
, che non è completamente supportato in tutti i browser.
IE11 e IE10 eseguiranno il rendering position: sticky
come position: relative
. Pertanto, avvolgiamo gli stili in una @supports
query, limitando la persistenza ai soli browser che possono renderla correttamente.
<div class="sticky-top">...</div>