Lez.6 - Corso Avanzato Css

La Proprietà Z-index
- Sovrapposizione di Elementi in un foglio di stile Css

La Proprietà z-index:

Ordine di Profondità di Visualizzazione detto anche Z-index (index indice).

E' la proprietà che sposta gli elementi nello spazio in maniera perpendicolare rispetto al piano XY ed esattemente sposta gli elementi sull'asse cartesiano Z.

La proprietà z-index funziona solo se si dà una posizione (con la proprietà position) al contenitore del nostro elemento, e tale posizione deve essere diversa da static.

Il valore che diamo alla proprietà z-index, oltre che ad auto e inherit, (z-index: auto; valore predefinito) è un valore di un numero intero che può essere sia positivo che negativo.

Maggiora è il valore di z-index, più in cima alla pila si troverà l'elemento, sempre che si trovi all'interno della stessa pila.

Quando due elementi della stessa pila hanno uno valore di z-index uguale prevale la posizione che gli elementi hanno nel flusso della pagina.
Se, alla proprietà z-index, inserisco dei valori più bassi o addirittura negativi l'elemento si posiziona dietro, sotto a tutti gli altri ma sta sempre davanti all'elemento che costituisce la radice della pila principale, tale radice è chiamata Livello Canvas (tela).

Normanlmente l'elemento radice della pila principale è l'elemento con il tag html.

Ogni volta che un oggetto fa da contenitore ad un altro questo oggetto da origine ad una nuova pila, ma solo se al contenitore gli viene dato un posizionamento diverso da static perché se non gli viene dato la proprietà z-index non funziona, come se non esistesse, come se non lo avessimo scritto nel codice.

Perciò, se un contenitore con una pila di elementi lo racchiudiamo in un altro contenitore quest'ultimo contenitore sarà la radice del primo contenitore, quindi, qualsiasi elemenmto del primo contenitore sarà sempre più in alto del suo elemento radice e sempre più in alto dell'elemento più alto del secondo contenitore.
Quindi sullo schermo si posizionerà sempre prima il canvas (dopo avergli dato un posizionamento con position diverso da static e un valore di z-index quale vogliamo, perché il canvas sarà sempre più in basso rispetto al contenuto) del contenitore che contiene la nostra pila di elementi, poi si vedra il contenuto, e in fine si vedranno i nostri elementi con l'ordine di comparizione assegnatogli da z-index.

Ci sono altri modi per forzare un elemento a diventare una base per la pila, ad esempio uno dei trucchetti che si usa è quello di impostare una opacità inferiore a 1 (es. opacity: 0.99;) e sostituire la proprietà opacity con la proprietà position e la proprietà z-index.

Nell'esempio del codice sotto, il div 4 è su tutti gli altri, pur avendo uno z-indez più basso, perché non è figlio di article, e noi avendogli dato uno z-index abbiamo creato una nuova pila la quale si poggia sulla base (sul canvas) di article.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Z-index</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
	    background-color: darkgrey;
    }
    div {
	    width: 150px;
	    height: 150px;
	    position: relative;
    }
    #uno {
	    background-color: green;
	    top: 100px;
	    left: 120px;
	    z-index: 2;
    }
    #due {
	    background-color: pink;
	    top: 10px;
	    left: 250px;
	    z-index: 6;
    }
    #tre {
	    background-color: purple;
	    top: -100px;
	    left: 200px;
	    z-index: 5;
    }
    article {
	    background-color: #7FFFD4;
	    opacity: 0.99;
    }
    #quattro {
	    background-color: yellow;
	    position: absolute;
	    top: 280px;
	    left: 290px;
	    z-index: 1;
    }
  </style>
 </head>
 <body>
   <h1>Ordine di Profondità di Visualizzzzione con la proprietà z   index</h1>
   <article>
	   Questo è un contenitore, article, dove vi fanno parte i DIV 1, DIV   2, e DIV 3. Il DIV 4 è fuori di article.
	   <div id="uno">
		   Contenuto del DIV 1
	   </div>
	   <div id="due">
		   Contenuto del DIV 2
	   </div>
	   <div id="tre">
		   Contenuto del DIV 3
	   </div>
   </article>
   <div id="quattro">
	   Contenuto del DIV 4
   </div>
 </body>               
</html>