La principale proprietà per posizionare un elemento in una posizione fissa è sticky, questa è studiata per fissare elementi in una determinata posizione che rimarrà fissa anche in caso di scroll dall’utente e ridimensionamento.

Il principale uso di questa tecnica è la creazione di barre fisse in alto ad una pagina o in posizione finale come footer. La documentazione ufficiale è ricca di esempi che si possono riassumere con una sola classe:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Un elemento con questo tipo di classe è una alternativa al posizionamento relative e fixed ma dipende solo dalla posizione della scrollbar, esso si posiziona relativamente al contenitore e viene fissato allo schermo, purtroppo Internet Explorer, Edge 15 e vecchie versioni dei browser non supportano questa proprietà mentre il browser Safari richiede l’aggiunta di una proprietù specifca con il prefisso webkit.

Fin dalla prima versione di CSS, la proprietà float è stata una delle più usate per la creazione di layout e parti di pagine, nonostante gli tanti sforzi non esiste un vero standard in quanto con l’uso di questa proprietà visto che è possibile posizionare elementi nella pagina non in maniera “sequenziale” come vorrebbe lo standard HTML, d’ora in avanti in questo articolo parleremo di elementi fluttuanti come qualsiasi tag con la proprietà float impostata con qualsiasi valore, per ogni dubbio rimando sempre alla guida W3C.

La prima caratteristica degli elementi fluttuanti è che sono impostati come block-level, in poche parole questo significa che sono elementi blocco indipendente da quello che gli sta attorno e che hanno una propria altezza e una propria altezza che viene calcolata automaticamente dal contenuto, la caratteristica principale è che il contenitore dell’elemento non si adatta a questa altezza automaticamente, infatti si possono creare situazioni del tipo:

cioè l’elemento verde (il contenitore) non si auto-adatta alle dimensioni dell’elemento in giallo (che è quello fluttuante contenuto), l’elemento blu (che è il successivo) si posizione dove trova posto infatti si posiziona a sinistra dell’elemento fluttuante, questo perché (come dice la parola stessa) il fluttuare crea spazi che i browser provano a riempire, per evitare questo si deve usare la proprietà clear che vedremo in seguito. Uno dei problemi più grandi degli elemento fluttuanti è che si auto-adattano in larghezza quindi può capitare di perderne il controllo, conviene sempre impostare la larghezza dell’elemento fluttuante oppure, ancora meglio, impostare la larghezza del contenuto dell’elemento, poi il fluttuante si adatta alla larghezza.

Il problema più grave che affligge grafici e programmatori web è che gli elementi fluttuanti, tendono ad uscire dal contenitore e che gli elementi successivi possono posizionarsi in posizioni non volute, per risolvere questo problema negli anni sono state create molti ipotesi e filosofie, la più comune prima dello standard CSS3 era creare dei tag div che fungessero da “interruzione di float” detta anche Clearfix, tecnica descritta nella documentazione ufficiale come un elemento invisibile che divide gli elementi evitando sovrapposizione indesiderate. Per fare questo bastava creare una classe:

<div style=”clear:right”> </div>

con questo stile si indica che questo div non deve avere elementi fluttuanti a destra e a sinistra, quindi qualsiasi elemento successivo viene disegnato come se nulla ci fosse sopra. Questo ha però un grande difetto: inserire nelle pagine HTML un tag vuoto in tutti i punti, quindi il controllo degli elementi fluttuanti non è fatto via CSS ma via HTML, cosa chiaramente non positiva per i grafici. Da notare che questo div (essendo vuoto e fluttuante) non è visibile e non crea danni alla struttura grafica della pagina. Negli anni poi ci sono molti tentativi di sistemare la cosa in maniera più elegante ma con CSS3 il problema è stato risolto definitivamente con una tecnica evoluta: l’uso della proprietà after: in c’è un tag con un figlio fluttuante basta aggiungere la caratteristica

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

per indicare che qualsiasi tag successivo al contenitore deve ignorare l’elemento fluttuante e si posiziona dopo come se “nulla fosse”, da notare che abbiamo dovuto inserire uno spazio dopo per creare un elemento vuoto e mostrare la disposizione tabellare. Il nostro esempio quindi diventa:

Una tecnica mista di posizionamento combinata con il posizionato fluttuante è fissare un elemento in base a valori fissi, per esempio questa tecnica può essere usata per fissare un elemento a fine pagina come footer, la documentazione ufficiale presenta un bellissimo esempio:

<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}
</style>
...
<div class="footer">
  <p>Footer</p>
</div>