[Resolvido] z-index

[CripToGraFado 0]

Olá pessoal,Eu estou com uma duvida que está me matando! Ai vai a bomba:Eu gostaria de saber pra que serve o 'z-index' do CSS... Eu já olhei até no manual do CSS, mas não entendi nada.! :(Alguem pode me responder isso?Obrigado!Agradeço desde já

[webflex 0]

Olá,Imagine um eixo Z, esse eixo cresce perpendicularmente perante a sua página, permitindo criar 'n' layouts por cima de um dos outros ou por baixo. Esta propriedade aceita valores negativos e valores positivos. Esta propriedade só funciona com posicionamento, por exemplo: position: absolute..Cumps \o/

[Adair Junior 0]

O z-index é a ordem de empilhamento dos elementos da página que tu está criando. Funciona mais ou menos como as layers do Fireworks, Illustrator, Photoshop... Quanto maior o índice z-index, mais acima vai ficar o elemento em questão.

Mas como disse o amigo ali em cima, só funciona com a propriedade position definida.

[RoXbY 3]

deixa eu só dar meu pitaco aqui, e explicar melhor o que seria o eixo Z

 

existem 3 coordenadas no mundo para que os objetos sejam criados, o X, Y e o Z. o eixo Z é o eixo da profundidade, o qual dá características de 3D a uma imagem, a profundidade.

 

X = largura (veja por "repeat-x")

Y = Altura (veja por "repeat-y")

Z = Profundidade

 

se conseguíssemos ter a percepção dessa Z no monitor, seria algo, visto de lado algo deste tipo: ||| e visto de frente, com o layout todo se encaixando, um cubo [_], sacou?

 

então se você quiser que um elemento fique a cima, ou abaixo de outro "forçadamente" através do css, utilize a z-index que ele irá ordenar a prioridade independente da ordem do HTML.

 

Usei uma vez para um logo de um cliente, aliais, estou usando ainda... :)

 

agora complemento o final do meu raciocínio com a resposta do Adair Junior!!

 

Abraços ;D

[Giovani 104]

Ótimas respostas pessoal.

Para complementar e fechar, lembrem-se, o z-index só funciona com elementos setados com valor absolute no atributo position.

 

CripToGraFado, quando for abrir um post, coloque o títuo dele referente a sua dúvida.

O título do post será alterado

Sai: Duvida me matando!

Entra: z-index

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Nícolas 4]

Apenas corrigindo, funciona com relative também ;)

[Paulo de Tarso F. M. 24]

Opa! Olha eu aqui... Deixarei minha "explicação", agora com imagens... Imagine uma estrutura da seguinte forma:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif HTML:

<div id="num1">1</div><div id="num2">2</div><div id="num3">3</div>

Se for visualizado no browser do jeito que está, um texto vai ficar abaixo do outro, certo? Agora vamos aplicar as formatações:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS:

div {	width: 136px;	height: 136px;	overflow: hidden;}div#num1 {	background-color: #f00;}div#num2 {	background-color: #00f;}div#num3 {	background-color: #008000;}

Inicialmente temos somente as cores de fundo e os tamanhos definidos... Veja como ficaria dessa forma: exemplo sem position

 

Agora vamos aplicar uma posição às divs, utilizando a propriedade position: absolute:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS:

div {	width: 136px;	height: 136px;	overflow: hidden;}div#num1 {	background-color: #f00;	position: absolute;	left: 146px;	top: 10px;}div#num2 {	background-color: #00f;	position: absolute;	left: 78px;	top: 78px;}div#num3 {	background-color: #008000;	position: absolute;	left: 10px;	top: 146px;}

Veja como ficou: exemplo com position

 

Observe que a div 2 (azul) ficou sobre a div 1 (vermelha) e a div 3 (verde) ficou sobre a div 2 (azul)... Isso porque, quando o browser "leu" o código da página, ele foi montando à medida que foi percorrendo os itens, colocando dessa forma os itens em seus respectivos lugares de acordo com as formatações. Mas como eu faria para colocar a div 2 (azul) na frente das divs 1 (vermelha) e 3 (verde)? É aqui que entra a propriedade z-index. Vamos aplicá-la ao nosso exemplo:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS:

div {	width: 136px;	height: 136px;	overflow: hidden;}div#num1 {	background-color: #f00;	position: absolute;	left: 146px;	top: 10px;	z-index: 1;}div#num2 {	background-color: #00f;	position: absolute;	left: 78px;	top: 78px;	z-index: 3;}div#num3 {	background-color: #008000;	position: absolute;	left: 10px;	top: 146px;	z-index: 2;}

Veja como ficou agora com o z-index aplicado: exemplo com position e z-index

 

Observe que o maior número aplicado do z-index foi a div que ficou "por cima" de tudo... Poderíamos utilizar qualquer outro número, não importa, poderíamos colocar 1, 2 e 3, poderia ser 10, 20, 30, poderia ser 1, 373 e 1534... Sempre será renderizado em ordem decrescente: o maior em cima e assim vai indo com os menores...

 

Será que ficou mais claro agora o funcionamento dessa propriedade?

 

Bom, espero que tenha ajudado mais um pouco com isso... Qualquer coisa, é só perguntar!

 

Abraço!

[Darkstar 1]

ótimo tópico.. mas o seguinte, qual a compatibilidade do z-index com os navegadores.... por exemplo.. sei que o z-index: -1; funciona no IE.. mas no FF não...

[Giovani 104]

nick171, você poderia mostrar um exemplo?

Particularmente eu nunca vi.

Apenas corrigindo, funciona com relative também ;)

Darkstar, nunca tive esse problema.

Acho que se o z-index estiver seta corretamente ele funciona.

ótimo tópico.. mas o seguinte, qual a compatibilidade do z-index com os navegadores.... por exemplo.. sei que o z-index: -1; funciona no IE.. mas no FF não...

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Nícolas 4]

hehehe posso afirmar com certeza que funciona, pois utilizei ontem mesmo no novo site de um cliente da empresa que trabalho.Lembro que fiquei até em duvida se ia funcionar, resolvi tentar e foi.;)

[CripToGraFado 0]

Valeu pessoal!!!Me ajudo muito :)Obrigado \o/

[webflex 0]

Olá,Tantas respostas :P, isto é que foi hein?!Bonito tópico.Cumps \o/

[CACA COBRA 1]

Otimo topico!!!....Acabou de tirar minhas duvidas sobre esse cara :D