TheJoe.it Into the (open) source

4mag/130

CSS: la proprietà “z-index”

aces

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.

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (0) Trackback (0)

Ancora nessun commento.


Leave a comment

Ancora nessun trackback.