Durante lo sviluppo di risorse web moderne, si incontrano frequentemente le seguenti esigenze: mostrare un testo descrittivo sopra la scheda prodotto; aprire un messaggio popup; visualizzare una finestra modale e, naturalmente, presentare in modo pratico il menu mobile. Per raggiungere tutti questi obiettivi, si utilizza la proprietà position.

position: static | relative | absolute | fixed | sticky

La proprietà position viene utilizzata per modificare il posizionamento di un elemento. Per impostazione predefinita, tutti gli elementi possiedono position: static. Una volta assegnato un valore diverso alla proprietà position, è possibile utilizzare anche le proprietà top, left, right e bottom per posizionare un elemento secondo le proprie esigenze. Verranno analizzate tutte queste opzioni in seguito.

Flusso predefinito del documento

Il flusso predefinito del documento indica come gli elementi vengono posizionati in una pagina web senza istruzioni di posizionamento specifiche applicate. Gli elementi sono disposti nell'ordine in cui appaiono nel markup HTML.

Nota

Si consiglia di mantenere tutti gli elementi all'interno del flusso predefinito del documento, salvo nei casi in cui il posizionamento sia necessario per scopi decorativi o per ottenere funzionalità specifiche come popup, finestre modali, menu a discesa, menu per dispositivi mobili, ecc.