Publicidade
Compre um adesivo e ajude o Em Busca do Código a continuar.
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): DevMediaCompre 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.