Corsi on-line

CSS: posizionamento assoluto e relativo con elemento top

Iniziamo subito con il chiarire due concetti fondamentali per quanto riguarda il posizionamento degli elementi di pagina tramite regole di stile CSS. Chiamiamo assoluto (position: absolute) un posizionamento che consente di collocare una componente in base ai valori definiti tramite le proprietà top, left, bottom e right e che avviene in riferimento al contenitore dell’elemento. Si definisce invece relativo (position: relative) un posizionamento impostato attraverso top, left, bottom e right che non definiscono un punto preciso, bensì lo spostamento della componente rispetto al contenitore in orizzontale e verticale.

posizRiepilogando quanto già detto in termini più semplici, è possibile descrivere un elemento posizionato in modo assoluto come una componente che partecipa al flusso del resto di una pagina ma non fa parte di essa (è quindi assoluta), in assenza di un contenitore verrà utilizzato come riferimento la radice del documento in termini di markup HTML; un elemento posizionato in modo relativo è invece una sorta di placeholder (quindi un “segnaposto”) riferito alla collocazione che questa componente dovrebbe assumere naturalmente.

Per chiarire ulteriormente i concetti esposti è possibile fare riferimento alla proprietà top. Nel caso del posizionamento assoluto esso stabilisce la distanza in senso verticale di un elemento rispetto al bordo superiore del proprio contenitore o radice del documento. Nel caso del posizionamento relativo top definisce invece lo spostamento di un elemento rispetto al lato superiore della sua posizione iniziale; un valore positivo determinerà uno spostamento verso il basso, mentre un valore negativo produrrà uno spostamento verso l’alto.

Il seguente codice, il cui risultato viene evidenziato nell’immagine proposta in precedenza, mostra un esempio pratico di come si possa utilizzare la proprietà top in un div con posizionamento assoluto, all’interno di un contenitore con posizionamento relativo, per determinarne la distanza dal bordo di quest’ultimo pari a 60 pixel:

<!DOCTYPE html>
<html>
<head>
<style>
div.re {
    position: relative;
    width: 420px;
    height: 180px;
    border: 2px dashed red;
    padding-left: 10px;
}
div.as {
    position: absolute;
    top: 60px;
    width: 220px;
    height: 50px;
    border: 2px dashed black;
    padding-left: 5px;
} 
</style>
</head>
<body>
<h1>Posizionamento relativo e assoluto con top</h1>
<div class="re">Elemento con posizionamento relativo.
<div class="as">Elemento con posizionamento assoluto.</div>
</div>
</body>
</html>

Si noti come nel caso di un posizionamento statico (position:static) la proprietà top risulterebbe del tutto inutile; static (che è poi il posizionamento predefinito delle componenti di una pagina Web) è infatti la posizione che qualunque elemento occuperebbe normalmente nel flusso di un documento.

Post correlati
I più letti del mese
Tematiche