CSS
Usando z-index (Layers)
Publicado em: 02/09/2007 |
CSS |
Visualizações: 1.921 |
0 Comentário(s)
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.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:
No caso mostrado, os números índice estão em uma seqüência direta (de 1-5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em seqüência. O que conta é a cronologia dos números (a ordem).
O código para a ilustração das cartas é mostrado a seguir:
Fonte: http://pt-br.html.net/
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.
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:
No caso mostrado, os números índice estão em uma seqüência direta (de 1-5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em seqüência. O que conta é a cronologia dos números (a ordem).
O código para a ilustração das cartas é mostrado a seguir:
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}Fonte: http://pt-br.html.net/
Redação Oficina da Net
A Redação do Oficina da Net é composta por todos os integrantes da equipe do portal. Estamos abertos.
» Site do colunista
Todas as matérias de Redação Oficina da Net
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
Seja o primeiro a comentar!