Z-index, Para Que Serve?

fsphp · Dezembro 7, 2004

Citar
z-index define a ordem de um elemento na página... ou melhor, vai definir que elemento ficará em cima de outro, e só funciona com "position: absolute;".

Pessoal,

Eu tenho visto que o z-index define o empilhamento dos elementos, mas, PARA QUE ELE SERVE, QUAL SUA UTILIDADE?

Fabyo · Dezembro 7, 2004

http://www.blaz.com.br/stylesheets/artigo.asp?ID=13

fsphp · Dezembro 8, 2004

Excelente esse artigo. Eu estava imaginando mais ou menos isso mesmo, a exemplo das Layers no Photoshop. Realmente esclareceu minha dúvida.

Uma outra pergunta, os códigos abaixo, devem ser inseridos entre as tags <STYLE></STYLE>, na <HEAD>, ou não? Ou elas ficam dentro do corpo da página <BODY>?

Citar
#navega{
position : absolute;
top : 190px;
left : 10px;
width : 140px;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: brown;
background-color: #FFCC00;
z-index: 3
}
#navega2{
position : absolute;
top : 230px;
left : 20px;
width : 140px;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: brown;
background-color: #0099FF;
z-index: 1
}
#navega3{
position : absolute;
top : 280px;
left :50px;
width : 140px;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: brown;
background-color: #FFCCFF;
z-index: 2
}

Crystian · Dezembro 8, 2004

Isso mesmo, dentro da tag <head> e dentro das tag <style>

fsphp · Dezembro 8, 2004

Depois eu utilizo os "índices" #navega, #navega2 e #navega3 para referenciar esses styles, certo?

Então, por exemplo, dentro da tag <DIV> eu coloco o CLASS = "#navega3", ficando mais ou menos assim:

<DIV CLASS="#navega3">conteudo, conteudo, conteudo, conteudo</DIV>

Está certo dessa forma?

Valeu pessoal!!!

.

Crystian · Dezembro 8, 2004

Não, o # é para indicar um estilo sendo declarado pelo "id"....

<style>
#navega {
...
}
</style>

<DIV id="navega">conteudo, conteudo, conteudo, conteudo</DIV>

Assim todos os elementos que não tiverem definições de estilo na propria tag e tiverem o id = navega vão receber aquele estilo...

Não sei se fui claro...

Qualquer coisa posta ae...

Abraço

Crystian

Illidan · Dezembro 8, 2004

Cara, quando você criar os estilos assim:

Citar
#navega1 {
...
}
.conteudo {
...
}

você deve acessar assim:

Citar
<div id="navega1">
<span class="conteudo"> ... </span>
</div>

Entendeu?

fsphp · Dezembro 8, 2004

Legal pessoal,

Entendi. tanto um estilo que comece com"#" ou uma classe que comece com ".", ao ser referenciada dentro da tag, esses símbolos não são colocados.

Obrigado a todos!

Entrar

Z-index, Para Que Serve?

Pergunta

fsphp

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Fabyo

Link para o comentário

Compartilhar em outros sites

fsphp

Link para o comentário

Compartilhar em outros sites

Crystian

Link para o comentário

Compartilhar em outros sites

fsphp

Link para o comentário

Compartilhar em outros sites

Crystian

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

fsphp

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades