Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Usando z-index (Layers)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5438
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Usando z-index (Layers)   12/9/2010, 1:49 am

CSS usa o espaço tri-dimensional - altura, largura e profundidade. Nas lições anteriores vimos as duas primeiras dimensões. 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:

[Você precisa estar registrado e conectado para ver esta imagem.]

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:

Código:

#ten_of_diamonds {
   position: absolute;
   left: 100px;
   top: 100px;
   z-index: 1;
}

#jack_of_diamonds {
   position: absolute;
   left: 115px;
   top: 115px;
   z-index: 2;
}

#queen_of_diamonds {
   position: absolute;
   left: 130px;
   top: 130px;
   z-index: 3;
}

#king_of_diamonds {
   position: absolute;
   left: 145px;
   top: 145px;
   z-index: 4;
}

#ace_of_diamonds {
   position: absolute;
   left: 160px;
   top: 160px;
   z-index: 5;
}


_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
Americo
Novato
Novato


Masculino
Número de Mensagens : 4
Idade : 44
Experiencia em Webdesign : Medio
Pontos : 2344
Reputação : 4
Data de inscrição : 01/06/2011

MensagemAssunto: Re: Usando z-index (Layers)   1/6/2011, 3:13 pm

Com as explicações "Project HTML sobre o Cod.CSS é fácil aprender.
Voltar ao Topo Ir em baixo
Ver perfil do usuário
 
Usando z-index (Layers)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [tutorial] Usando time lines
» [Intermediario][IMG]Tratamento de pele com filtros e adjustment layers.
» acesso aos arquivos do meu forum usando ftp ou algum protocolo similar.
» Como descubro o tema que eu estou usando no meu forum ?
» Usando o target blank

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - avançado-
Ir para: