Publicidade

Compre um adesivo e ajude o Em Busca do Código a continuar.


z-index em HTML5 CSS3. Vídeo 97


Já estudou o eixo X e o eixo Y na escola? Pois bem, também existe o eixo Z e, em todos os casos que conheço o eixo Z é relativo a profundidade. O que não é nada diferente no caso do z-index em HTML, na verdade o z-index é uma propriedade do CSS (das CSS).


No site da fundação Mozilla a respeito do z-index encontrei um termo bem "elegante" para não chamar de diferente, este termo é "ordem Z". Então o que o z-index faz é especificar a ordem dos elementos no eixo Z (profundidade).


Para acompanhar essa videoaula você precisa de um documento HTML e um CSS, o documento HTML não mudará em nada, a única coisa que alteramos é o documento CSS. Pegue os códigos fontes a seguir.


Código fonte HTML (inicial):


Código fonte CSS (inicial):

Assista ao vídeo:

Mas seu exemplo é tão simples?


É aí que está o que você pode fazer com z-index. Menu superior fixo (position: absolute;) que não se esconde, menu superior sempre a frente dos outros elementos (HTML5 CSS3).


Mas cuidado, por exemplo o Em Busca do Código utiliza "serviços" de terceiros dentro do site e isso pode atrapalhar o z-index, por isso, nesses casos é bom sempre inserir um valor para a propriedade z-index dentro do CSS bem auto.


Exemplo um pouco diferente: No meu segundo site a propaganda era igual essa fixa na parte inferior do site, mas em determinados momentos ela mesma se escondia atrás do conteúdo do próprio site. E neste exemplo peculiar eu tiver que configurar um z-index para a pessoa ver a propaganda. Isso mesmo, eu escondia as propagandas presentes em um dos meus sites.


Código fonte CSS do final dessa vídeoaula.


Código fonte CSS (final):


Caso entenda que faltou algo confira nossas fontes, pode completar ainda mais o conhecimento a respeito da propriedade z-index.


Fonte (externa, abre em outra aba): Fundação Mozilla
Fonte (externa, abre em outra aba): HTML . NET
Fonte (externa, abre em outra aba): DevMedia

Compre um adesivo e ajude o Em Busca do Código a continuar.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.