Esistono tre diversi tipi di posizionamento e sono statico ossia quello usato fino ad ora, relativo e assoluto.

Per applicare una posizione relativa ad un elemento dobbiamo innanzitutto selezionare questo elemento ed adottando la tecnica appresa nella lezione sul pannello Stili CSS nella finestra definizione regola CSS selezioniamo nella colonna di sinistra posizione e nel primo campo in alto selezioniamo relative. Fatto questo nei campi sottostanti left-right-top-bottom definiamo i valori che distanzieranno l'elemento dal bordo del contenitore che ,appunto ,lo contiene. Questo contenitore può essere il body o un div o quant'altro si possa usare.


Per applicare una posizione assoluta ad un elemento ripetiamo la procedura precedente. Nella colonna di sinistra selezioniamo posizione e nel primo campo in alto selezioniamo absolute. Nei campi sottostanti left-right-top-bottom definiamo i valori che distanzieranno l'elemento dal bordo del contenitore che contiene l'elemento.


La differenza della posizione assoluta con la posizione relativa sta nel fatto che ridimensionando la finestra del browser l'elemento non modifica la sua posizione quindi potrebbe provocare degli effetti visivi indesiderati.

Bisogna prestare particolare attenzione nell'uso del posizionamento sia relativo che assoluto in quanto potrebbe portare a sovrapposizioni con altri elementi. Se da un lato questa evenienza puo rappresentare un disguido da un altro potrebbe portare a degli effetti visivi belli e funzionali.

Per definire quale elemento ,in caso di sovrapposizione con un altro, deve avere la precedenza di visualizzazione, ossia deve essere visualizzato sopra l'altro esiste una proprietà chiamata z-index


Il valore attribuito alla proprietà z-index permette di definire una gerarchia di sovrapposizione. Il valore più alto da la precedenza su quello minore. Ad esempio un z-index con valore 100 ha la precedenza su un z-index con valore 90 e così via.

COMMENTI