CSS: z-index e posizionamento

La proprietà CSS z-index entra in gioco nel posizionamento quando vi è una sovrapposizione tra elementi. Tale proprietà specifica quale elemento dovrà essere visualizzato sopra agli altri. Un elemento con uno z-index di valore superiore verrà sempre visualizzato sopra un elemento con un valore di z-index inferiore. Nel nostro esempio useremo cinque immagini rappresentanti i loghi di altrettanti browser e li posizioneremo all'interno di un contenitore usando la proprietà z-index.

La nostra marcatura è elementare:

<div id="browsers">

	<img src="chrome.png" alt="" id="chrome" />
	<img src="firefox.png" alt="" id="firefox" />
	<img src="iExplorer.png" alt="" id="ie" />
	<img src="opera.png" alt="" id="opera" />
	<img src="safari.png" alt="" id="safari" />

</div>

Nel nostro CSS andremo a definire il contenitore come posizionato in modo relativo, creando così un posizionamento contestuale per le immagini, che saranno invece posizionate in modo assoluto e con valori di z-index diversi. Vogliamo che l'icona di Chrome appaia al centro e con un valore di z-index pari a 5, quindi Firefox e IE ai suoi lati con uno z-index pari a 4 (quindi dietro l'icona di Chrome) e infine Opera e Safari ai lati di Firefox e IE con un valore di z-index pari a 3 (quindi visualizzati dietro Firefox e IE):

#browsers {
	width: 500px;
	height: 400px;
	position: relative;
	margin: 0 auto;
}

#browsers img {
	display: block;
	width: 128px;
	height: 128px;
	position: absolute;
}

#chrome {
	top: 50%;
	left: 50%;
	margin: -64px 0 0 -64px;
	z-index: 5;
}

#firefox {
	top: 130px;
	left: 110px;
	z-index: 4;
}

#ie {
	top: 130px;
	right: 110px;
	z-index: 4;
}

#opera {
	top: 130px;
	left: 60px;
	z-index: 3;
}

#safari {
	top: 130px;
	right: 60px;
	z-index: 3;
}

Potete visionare l'esempio finale in questa pagina.