Il posizionamento contestuale è un tipo di posizionamento assoluto in cui l'elemento posizionato si dispone visivamente in relazione ad un altro elemento e non rispetto alla finestra del browser. In questo articolo vedremo i dettagli di questo tipo di posizionamento.
Affinché il posizionamento contestuale abbia luogo, è necessario che un elemento genitore sia posizionato, ossia abbia un valore della proprietà position diverso da static.
Se nessun elemento genitore ha tale valore e si utilizza la dichiarazione position: absolute sull'elemento figlio, quest'ultimo verrà posizionato rispetto alla finestra del browser.
Ad esempio:
.container {
position: relative;
}
.box {
position: absolute;
top: 1rem;
left: 1rem;
}
In questo esempio le coordinate top e left verranno calcolate in relazione al box dell'elemento con classe container che ha la dichiarazione position: relative. Se tale dichiarazione non fosse stata presente, le coordinate sarebbero state calcolate in base alle dimensioni della finestra del browser.
Una particolare forma di questo posizionamento riguarda il valore auto della proprietà top. Se l'elemento posizionato viene preceduto nel sorgente HTML da un elemento non posizionato e si utilizza la dichiarazione top: auto, l'elemento verrà posizionato immediatamente al di sotto dell'elemento statico.
Ad esempio, dato il seguente codice HTML:
<h2>Table of Contents</h2>
<ul id="toc"></ul>
Possiamo avere il seguente codice CSS:
#toc {
position: absolute;
top: auto;
left: 0;
}
In questo caso la lista non ordinata verrà posizionata in modo assoluto al di sotto dell'elemento h2, che non è posizionato e precede la lista nel sorgente HTML.
Conclusione
Il posizionamento contestuale si rivela molto utile nel caso in cui abbiamo una struttura a livelli e dobbiamo controllare con i CSS la posizione esatta degli elementi.