(TUTORIAL Z-INDEX) Usando z-index (Layers)

[Hugo Borges_120734 6]

Galera hoje tive que utilizar o z-index em uma estrutura de div, vou compartilhar o que aprendi. Afinal pode ter alguém com as mesmas dúvidas que eu estava.

 

Segue:

 

CSS usa o espaço tri-dimensional - altura, largura e profundidade. Nas lições anteriores vimos as duas primeiras dimensões. Nesta lição aprenderemos como colocar elementos em layers (camadas). Resumindo, camadas significam como os elementos se sobrepõem uns aos outros.

Para fazer isto definimos para cada elemento um número índice (z-index). O comportamento é que elementos com número índice maior se sobrepõem àqueles com menor número.

Código do exemplo:

	#ten_of_diamonds {
		position: absolute;
		left: 100px;
		top: 100px;
		z-index: 1;
	}

	#jack_of_diamonds {
		position: absolute;
		left: 115px;
		top: 115px;
		z-index: 2;
	}

	#queen_of_diamonds {
		position: absolute;
		left: 130px;
		top: 130px;
		z-index: 3;
	}

	#king_of_diamonds {
		position: absolute;
		left: 145px;
		top: 145px;
		z-index: 4;
	}

	#ace_of_diamonds {
		position: absolute;
		left: 160px;
		top: 160px;
		z-index: 5;
	}
	

Obs: a ordem ira ficar assim:

 

[lokaodomau 61]

Se não me engano, por padrão, cada elemento sobrepõe o anterior (quando há a possibilidade, por exemplo, com uso do float), mas desta forma, eu posso fazer conforme abaixo que o resultado continuará sendo o mesmo da imagem.

<div id="queen_of_diamonds" style="width: 100px; height: 100px;"></div>
<div id="ace_of_diamonds" style="width: 100px; height: 100px;"></div>
<div id="ten_of_diamonds" style="width: 100px; height: 100px;"></div>
<div id="jack_of_diamonds" style="width: 100px; height: 100px;"></div>
<div id="king_of_diamonds" style="width: 100px; height: 100px;"></div>

[Hugo Borges_120734 6]

Correto, mas se vc quiser deixar o quadro azul sobrepondo os outros, tera que usar o z-index.