3 replies to this topic

[Samuel Silva Pereira]

Oi Galera, vocês que entende de css, me explica uma coisa que tenho uma pequena dúvida, como funciona exatamente o z-index?!

qual a diferença do negativo e do positivo?! por exemplo, qdo ele vem tipo: z-index:-1; ou z-index:9999;

oq ficaria na frente seria 9999?!

valeu!

[shayllis]

Bom o Z-index funciona da seguinte forma... Cada navegador interpreta de um jeito, mas costuma ser assim:
Default: Quando não é definido um z-index o navegador puxa pela posição do elemento(fixed,absolute,static,inrihhed) e depois pela posição do elemento no código.
Quando definido ele vai de 0 a 99.999, seguindo na sequencia de acordo com o elemento pai
Mas vale lembra z-index apenas funciona quando o elemento tem um position.

Caso tenha ajudado adicione um ponto

[zerof]

Quando se colocam elementos em uma página, estes são organizados como uma pilha, (stack em inglês).
Numa pilha padrão, o último elemento a entrar, é o primeiro a sair.
Pense numa pilha de pratos, para se tirar o primeiro prato, todos os posteriores devem ser retirados antes.
Cada prato, pode ser comparado a uma camada independente.
Mudar a ordem física de cada prato exige algum trabalho adicional.
O z-index foi implementado, justamente para ordenar o empilhamento virtual de elementos em uma página, facilitando, assim, sua fácil localização e retirada da pilha.

Assim, elementos com z-index maiores estão mais próximos do topo da pilha e os de z-index menores, mais no "fundo" da mesma.
Valores negativos são permitidos.

A propriedade z-index só funciona para posicionamentos do tipo: absolute, relative e fixed.

Além de se poder atribuir um número ao z-index, ainda podem ser usados: auto, e inherit.

Exemplificando, um elemento com z-index:10, será exibido sobre outro elemento com z-index:menor que 10 se estes apresentarem-se sobrepostos em uma página.
(Imagine uma imagem em z-index:1, se voce deseja sobrepor uma <div>...</div> sobre ela, basta colocar seu z-index:qualquer valor maior que 1.)

PS:
Além da organização em forma de pilha, outra maneira é a fila.
Mas isto já é outra história.

Edição feita por: zerof, 20/03/2012, 17:23.

[deviqingyo]

elementos com z-index maiores estão mais próximos do topo da pilha e os de z-index menores, mais no "fundo" da mesma.