Come posizionare e sovrapporre gli elementi di una pagina web

Come posizionare i vari elementi in una pagina web con i tag position e i valori absolute, relative e fixed e come non sovrapporli con z-index.

Quando si inserisce in una pagina web un elemento, questo va a posizionarsi nel normale flusso del documento. In questo post vedremo come modificare queste regole di base quando sia necessario.

Per esempio quando si apre un menù, è necessario che vada a sovrapporsi agli elementi sottostanti, in modo da poter cliccare sulle voci, e non a esserne nascosto. Un'altra situazione molto comune è quella che si verifica quando c'è da posizionare un elemento, non in funzione della intera pagina web, ma in relazione a un suo contenitore.

La posizione di un elemento all'interno di una pagina web è determinata dalla proprietà position e può essere applicata generalmente a tutti gli oggetti, dai contenitori <div> alle immagini o ai video.

I valori che può assumere il tag position sono quattro: static, fixed, absolute e relative. Il valore static solitamente non si utilizza perché, con questa scelta, l'elemento assume la posizione di default, cioè la stessa che occuperebbe senza il tag position:static;.

Vediamo brevemente come funzionano gli altri valori e qualche esempio di utilizzo.

POSITION RELATIVE

Il tag position:relative; posiziona l'elemento in base al suo box contenitore. Se tale box non esiste, viene traslato rispetto alla sua posizione naturale, occupata all'interno del normale flusso del documento. La traslazione viene fatta mediante i tag top, bottom, left e right con ovvio significato.

Facciamo un esempio pratico. Poniamo che si voglia creare un rettangolo che contenga determinati elementi e che si voglia posizionare a una distanza di 100 pixel dall'alto e di 50 pixel dalla sinistra. Se noi inserissimo solo i tag top:100px; left:50px; all'interno del campo di azione del tag style, non succederebbe nulla. Per avere il posizionamento desiderato bisogna aggiungere all'interno di style anche il tag position:relative;.

Il risultato precedente si ottiene con questo codice

<div style="position: relative; top:100px; left:50px; width:300px; height: 100px; border: 3px solid #0ff;"> <span style="margin:20px; font-size:16px; color:#036; font-weight:bold;">RETTANGOLO</span></div>

in cui i tag colorati di rosso funzioneranno solo è presente il tag position:relative;. Le altre parti del codice sono state inserite solo per dare un aspetto coerente all'esempio e sono puramente indicative. Per comprendere bene il significato dei tag, basta pensare che inserendo il tag top:100px; significa spingere l'elemento dall'alto di 100 pixel. Con il tag left:50px; si intende spingere l'elemento di 50 pixel dalla sinistra.

Si possono usare anche valori negativi. Il tag top:-100px; significa tirare verso l'alto l'elemento di 100 pixel mentre left:-50px; significa tirarlo verso sinistra di 50 pixel. Analogo comportamento hanno i tag right e bottom usati per spingere o tirare da destra o dal basso rispettivamente con valori positivi o negativi.

POSITION ABSOLUTE

Il tag position:absolute; può essere usato a prescindere dal tag position:relative; ma molto spesso sono usati insieme. Con tale tag, l'elemento viene posizionato in base ai loro valori dalle proprietà top, left, bottom o right. Il posizionamento assoluto avviene rispetto al box contenitore dell’elemento. Se tale elemento non esiste, viene posizionato con l’area del browser che contiene il documento e che ha inizio dall’angolo superiore sinistro di tale area. Un elemento posizionato in modo assoluto scorre insieme al resto del documento.

Il due contenitori dello screenshot precedente si creano con questo codice

<div style="position: relative; top:80px; left:80px; width:300px; height: 100px; border: 3px solid #0ff;"> <span style="margin:20px; font-size:16px; color:#036; font-weight:bold;">RETTANGOLO CONTENITORE </span> <div style="position: absolute; width:50px; height: 50px; left:50px; bottom:10px; border: 2px solid #940F04;"> <span style="margin:5px; font-size:14px; color:#f00; font-weight:bold;">CIAO </span></div>
</div>

Nel contenitore principale si inserisce il tag position:relative; e, opzionalmente, si può posizionare rispetto al documento con i soliti tag top, bottom, left e right. Il tag position:absolute; si inserisce nello style del contenitore da inserire al suo interno. In questo caso le traslazioni avvengono rispetto al contenitore principale e non al flusso del documento. Tale traslazioni si introducono sempre con i tag top, bottom, left e right. Anche in questo caso gli altri elementi del codice sono stati inseriti per rendere i contenitori più chiari.

Non occorre inserire tutti e quattro gli elementi top, bottom, left e right ma ne bastano due, uno verticale e uno orizzontale. All'interno di un contenitore, o dentro una pagina web, possono essere inseriti più elementi.

SOVRAPPOSIZIONE DEGLI ELEMENTI E TAG Z-INDEX

Iniziamo con un esempio pratico di un codice di un contenitore con tre altri contenitori al suo interno.

Il contenitore principale è largo 300 pixel e alto 200 pixel, mentre i contenitori al suo interno sono quadrati di 80 pixel di lato, colorati rispettivamente di giallo, nero e verde. Il contenitore principale ha il tag position:relative; mentre quelli inseriti al suo interno hanno il tag position:absolute;.

Il posizionamento relativo dei tre quadrati rispetto al contenitore principale è dato dai tag top e left con i rispettivi valori colorati di marrone. Un codice del genere produce questo risultato.

La regola generale è quella che l'elemento che viene dopo si sovrappone a quello che viene prima. Il quadrato nero nasconde quindi parzialmente il quadrato giallo e quello verde nasconde a sua volta quello nero.

Si può cambiare l'ordine naturale della sovrapposizione utilizzando il tag z-index insieme a un valore opportuno. Tale tag può essere utilizzato per creare un contenitore di un elemento che vogliamo sempre in primo piano rispetto agli altri, come per esempio può essere un menù a tendina per evitare che finisca sotto ad altri oggetti o sotto annunci pubblicitari.Uno z-index più elevato significa sovrapporsi a un altro elemento con uno z-index più basso. In taluni codici, anche presenti in questo sito, avrete visto per esempio delle stringhe tipo z-index:999999; con un valore altissimo di z-index per essere sicuri che l'elemento non venga nascosto.

Modifichiamo il codice precedente in questo modo

dove sono stati inseriti i tag z-index:1; z-index:2; e z-index:3; . Lo z-index con il valore più alto, cioè z-index:3; è stato inserito nel quadrato colorato di nero. Il risultato di tale codice sarà il seguente

con il quadrato nero che si sovrapporrà non solo a quello giallo ma anche a quello verde, proprio perché ha uno z-index dal valore più alto. Spesso nei Temi è inserito un CSS di questo genere

.selettore a:hover {
.....
z-index:9999;
}

per fare in modo che tale elemento si vada a sovrapporre sempre agli altri elementi presenti quando ci passa sopra il cursore (hover). In un certo senso si può dire che che se il tag position dà dei dati per il posizionamento bidimensionale, z-index incide su quella che possiamo chiamare la terza dimensione del layout.

POSITION FIXED

Il valore fixed per il tag position, sottrae l'elemento al normale flusso del documento. La differenza rispetto a position:absolute; sta nel fatto che, con il tag position:fixed;, il box contenitore è sempre la cosiddetta viewport, ovvero la finestra principale del browser, cioè l'area del contenuto.

In questo sito ho presentato diversi codici con il tag position:fixed; usato per esempio per mostrare sempre nella stessa posizione un menù o un altro widget. Infatti l''altra differenza fondamentale del valore fixed rispetto a absolute, è quella che quel box contenitore non scorre con il resto del documento, ma rimane fisso al suo posto.

Unisciti al Canale Telegram per ricevere aggiornamenti su nuovi post e commenti

Pubblicato il 14/05/18 - aggiornato il | Nessun commento :