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!
Como Funciona O Z-Index?!
Started By Samuel Silva Pereira, 13/03/2012, 19:26
3 replies to this topic
#1
Posted 13/03/2012, 19:26
Para quem quer saber os melhores Hd ExternoMensagens para celular e Frases lindas para você mandar.
Frases para Facebook para postar em seu mural.
Dia do Amigo e Piadas
Frases para Facebook para postar em seu mural.
Dia do Amigo e Piadas
#2
Posted 19/03/2012, 10:55
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
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
#3
Posted 20/03/2012, 17:20
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.
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.
--
zerof
ASSESSORIA & INTERDISCIPLINARIDADE
( ADVICE & INTERDISCIPLINARITY )
http://ed48.com/ - http://educar.pro.br
zerof
ASSESSORIA & INTERDISCIPLINARIDADE
( ADVICE & INTERDISCIPLINARITY )
http://ed48.com/ - http://educar.pro.br
#4
Posted 23/03/2012, 06:43
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.
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)