Oggi vediamo una importante proprietà dei CSS, ereditata anche dall’ultima versione, i CSS3. Sto parlando (come si sarà intuito dal titolo) della proprietà “z-index“.

Le proprietà “height” e “width” impostarenno altezza e larghezza, mentre “z-index” ci serve per spostare gli elementi nella terza dimensione di profondità (o asse “Z”). La terza dimensione è perpendicolare allo schermo e sarà di più facile comprensione per chi conosce programmi che prevedano l’utilizzo dei livelli.

Immaginiamo lo schermo come un tavolo sul quale appoggiare alcune carte da gioco, in questo modo:

In questo esempio ogni “carta” è un “div”, ogni “div” ha una proprietà “z-index” differente. Minore è il valore “z-index”, più “lontane” saranno le carte, se invece il valore è maggiore rispetto alle precedenti, il div verrà sovrapposto agli altri. Il CSS utilizzato è il seguente:

 #box1 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 15px;
	top: 15px;
	background: red;
	z-index: 1;
}

#box2 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 20px;
	top: 30px;
	background: green;
	z-index: 2;
}

#box3 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 25px;
	top: 45px;
 	background: blue;
	z-index: 3;
}

#box4 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 30px;
	top: 60px;
	background: yellow;
	z-index: 4;
}

#box5 {
  	border: 1px solid black;
  	height: 100px;
  	width: 80px;
	position: absolute;
	left: 35px;
	top: 75px;
	background: magenta;
	z-index: 5;
}

Nell’esempio che segue, invece è stato assegnato il valore “6” alla proprietà “z-index” del box 1:

Esplicitare il valore “z-index” non imposterà solo la posizione sull’asse “Z”, ma inizierà una nuova gerarchia di elementi. La proprietà “z-index” inoltre, accetta valori negativi e nel caso due elementi avessero lo stesso valore saranno mostrati secondo l’ordine gerarchico standard (sopra quelli inseriti dopo).

Per chi volesse fare qualche prova con l’esempio mostrato, è pubblicato a questa pagina.

Non ti basta?

Aggiungere una didascalia a comparsa alle foto con i CSS3 CSS e la proprietà “outline” Alcuni font, o meglio alcuni set di icone GTranslate: un widget per la traduzione automatica Bottoni menu di navigazione con CSS Sprites