Come funzionano i tag position:relative;, absolute, fixed e z-index per posizionare oggetti HTML.

Come usare i tag position:relative, position:absolute, position:fixed e z-index per posizionare e sovrapporre gli elementi in una pagina HTML.

In questo articolo vediamo come impostare il posizionamento di due o più oggetti HTML. Attraverso opportuni tag possiamo inserire un oggetto HTML con due modalità: assoluta o relativa. I parametri di posizionamento potranno essere riferiti al layout della pagina web oppure a un altro oggetto HTML.

La proprietà position serve appunto a creare dei CSS a partire dal selettore dell'elemento considerato. La sintassi generale è la seguente

selettore {position: valore;}

dove il selettore è la classe o l'ID dell'elemento e al posto di valore ci sono 4 opzioni:

1) position:static;

È il valore di default e indica la posizione normale dell'elemento nel flusso del documento.

2) position: relative;

L'elemento viene posizionato in relazione al suo box contenitore. In questo modo possiamo quindi modificare la posizione che l'elemento avrebbe nel normale flusso del documento. La quantità di traslazione viene individuata dai tag top, right, bottom e left. In sostanza con un valore di top:20px; si spinge l'elemento dall'alto di 20 pixel mentre con right:30px; l'elemento viene spinto da destra di 30 pixel. Queste traslazioni vengono effettuate in relazione al box che contiene l'elemento. Questo codice

inserirà un rettangolo a 50 pixel dalla parte alta e a 30 pixel dalla sinistra.

position-relative

Senza il tag position:relative; i tag top:50px; left:30px; non avrebbero funzionato come si può facilmente verificare incollando il codice in un Editor HTML come Real Time HTML Editor.

3) position:absolute;

Con questo tag l'elemento viene rimosso dal flusso normale e verrà posizionato sempre con i tag top, right, bottom e left rispetto al box contenitore dell'elemento vale a dire rispetto al primo elemento che abbia un posizionamento diverso da static. Quando tale elemento non esiste il posizionamento viene fatto rispetto alla radice HTML che in condizioni normali è niente altro che l'area del browser.

Questo tag viene utilizzato per posizionare per esempio un elemento fuori dal classico layout come una bandiera o un orologio digitale. Per esempio questo codice incollato in Modalità HTML

produce questo risultato

CIAO

4) position:fixed;

Con il valore fixed il contenitore di riferimento è sempre la finestra principale del browser ovvero il viewport e un elemento posizionato con fixed non scorre insieme al resto della pagina.

COME INSERIRE PIÙ ELEMENTI NELLO STESSO CONTENITORE

Si possono inserire più elementi nello stesso contenitore usando per esempio un codice come questo

che produce questo risultato

dove sono stati inseriti dei colori di background negli elementi interni per rendere le cose più chiare. Nell'elemento più esterno che ha i div di apertura e di chiusura evidenziati di giallo c'è invece solo un bordo. Per verificare vi basta anche stavolta incollare il codice nello strumento Real Time Editor.

COME USARE Z-INDEX PER SOVRAPPORRE GLI ELEMENTI

Come vedete dall'esempio precedente il secondo elemento si sovrappone al primo e il terzo si sovrappone al secondo e così via. Si può impostare un ordine di sovrapposizione diverso da quello naturale del flusso del documento utilizzando il tag z-index. In pratica impostare uno z-index più elevato per un elemento significa farlo sovrapporre a un altro con uno z-index più basso.

Per questa ragione spesso nei codici dei menù, ma non solo, si vedono tag tipo z-index:999999; con un altissimo valore per fare in modo che si sovrapponga a tutti gli altri elementi della pagina. Applicando questa regola si può modificare il codice precedente in questo modo

che produce questo risultato

Come vedete il primo e il terzo elemento si sovrappongono al secondo elemento che ha lo z-index più basso. Qualora in un elemento non fosse presente il tag z-index è come se ci fosse z-index:0;.

Pubblicato il 28/12/15 - aggiornato il | Nessun commento :