CSS: Porque z-index: 99999 é uma PÉSSIMA escolha?

Olá pessoal porque será que utilizar z-index 9999999 é uma má ideia eu vou mostrar para vocês no vídeo de hoje vamos lá se embora Olá pessoal tudo bom meu nome é Daniel você está no canal da ser front-end pontocom onde eu falo de tecnologia web que carreira Especialmente para quem está começando na área e a ideia de fazer o vídeo de hoje veio a partir de uma pergunta aqui mesmo no YouTube lá no vídeo que eu fiz uns cortes que eu fiz eu falei que a gente deveria evitar utilizar a sair nesse com vários novos

na frente tá EA pergunta foi a seguinte porque que devemos evitar utilizar as ainda 99999 e eu vou mostrar para vocês o motivo disso direto no meu código muito bom então deixa eu mostrar aqui antes de qualquer coisa deixa eu mostrar o quê que eu acabei desenvolvendo aqui rapidamente para mostrar para vocês tá então temos uma página bastante simples aqui que eu criei rapidamente aqui temos um header aqui em cima que ele tem um position fixed é um futuro que ele tem também um position Fix at e cada um desses botões vai abrir um pequeno

modal então se eu clicar aqui eu tenho um mudar o bastante simples aqui tá pessoal um modal bastante simples um xizinho para fechar sem nada demais tá agora se você for reparar o que que tá acontecendo esse modal ele está abrindo ele fica em cima do meu menu né E quando eu clico no meu menu quando na verdade quando eu clico em qualquer área dentro do meu modal seu clicar aqui no canto ele vai fechar porque eu coloquei o listener no modal inteiro tá então em qualquer área que eu clicar ele vai fechar o mudam

só que repara as vezes é por exemplo Imagina eu quero que o meu header ele fique por cima do modal tá eu quero que mesmo com o modal aberto eu quero que usuário eu consigo ainda navegar no meu site um exemplo tá é só para a gente poder demonstrar Então o que acontece imagina o seguinte eu tenho aqui no meu CSS deixa eu abrir aqui os meus arquivos e tem aqui no meu CSS é um estilo aqui que vai formatar o header tá então se eu vier para cá Olha lá eu tenho aqui o header

tá temos algumas algumas formatações bastante simples e ele tem um position Fix 7 Então imagina que eu quero fazer o seguinte eu quero colocar esse cara na frente do meu modal na eu não utilizei nenhum valor diz ainda que ainda então por padrão todo elemento que tens em ingles ele é um Dix 10 ele possui o valor Zero Isso significa que se eu colocasse em IKS com o valor um ele já vai ficar na frente de todo mundo se eu voltar aqui para o Chrome Olha lá o meu z-index aqui o um o valor um

ele já ficou acima de todo mundo deixa eu mudar a cor desse modal Deixa eu procurar aqui ó control F modal É isso aí vamos colocar um branco tem poder enxergar tá Vou colocar aqui é White Opa aqui deixa eu colocar o Haiti aqui eu vou colocar um pouco de trânsito de Transparência desse jeito faço só para ver se a gente consegue enxergar melhor OK aí ficou horroroso mas deu para entender Bacana Então a ideia é que eu bom eu deixei o meu no meu aqui o meu header sobre o modal é só que repara

que por exemplo imagina Mas eu não quero que o footer fique sobre o meu modal eu quero que primeiro venha o header depois o meu modal Quando ele aparecer e eu quero que o meu futuro fique para baixo como que eu posso fazer isso bom eu posso vir aqui no meu CSS E se o meu header possui um reinders com o valor um Isso significa que eu posso vir aqui no meu modal e eu vou colocar o meu modal para cima de todo mundo tá então vamos lá aí eu vou vim aqui e vou colocar

z-index é desse jeito e eu quero se lá eu tinha número um agora eu vou colocar o número dois por exemplo tá só que aí você já deve imaginar que Pronto ele ficou em cima do meu fo ter mas voltou a ficar acima aqui do meu header ou que o como é que a gente vai arrumar então eu vou precisar pegar o meu header e eu preciso fazer com que ele volte a ficar acima do meu modal E aí você não quer mais esse tipo de problema tá você não quer que ao manipular os em

IKS que o header fique para baixo de qualquer elemento seja o agora o modal ou qualquer outro elemento que vem aparecendo futuro então o que que você pode fazer é fazer o seguinte vêm aqui no header e colocar uns ainda que Esperando você para a senhora eu não quero que nunca nada Fique acima do meu reto Então vou vir aqui vou forçar o número bem grandão 9999 tá o quê que pode acontecer pessoal isso aqui aparentemente vai funcionar ficou bacana do eu queria só que a questão é a medida que outros componentes forem aparecendo por

exemplo imagina que você vai ter no futuro um formulário e esse formulário vai ter uma mensagem de erro por exemplo e essa mensagem de erro imaginar eu vou desenhar aqui tá imagina aqui esta mensagem de erro ela fica aqui olha só ela vem um box aqui sei lá imagina que aqui vai ter um boxe Zinho que vai para escrito assim o usuário inválido por exemplo sei lá qualquer coisa assim tá então o que acontece Você pode ter outros elementos no futuro que vão trabalhar também com os Henrique seja um feedback para o usuário por exemplo

ou qualquer coisa parecida com isso tá então você nunca vai querer que nada Fique acima do seu header só que imagina por alguma por algum motivo por exemplo que este que esta mensagem de erro ela tem que aparecer aqui por cima aqui ó ela tem que aparecer aqui em cima assim ó cobrindo tudo vamos supor tá e aqui você vai ter um texto a coisa escrito aqui em cima bacana ou seja ele vai ter que ter um número maior do que nove nove nove nove e outra Quando você vai colocando muitos números Assim fica difícil

dar mais atenção porque você não sabe exatamente o que está acima de cada coisa você vai precisar ficar chutando o valores e colocando números cada vez mais altos né percebe que a manutenção da sua página do seu sistema vai ficando cada vez mais complexa aqui eu tô fazendo uma simples página tá uma uma única página com três elementos com os genes Mas você pode ter uma aplicação muito mais complexa do que isso com vários componentes com várias páginas etc tá então criar uma maneira de gerenciar esses em inglês pode te facilitar muito a vida para

você não ter que ficar colocando vários novos não vários caracteres né dígitos 9 uma frente do outro até que chegue um que resolva seu problema sem você entender muito bem o porquê né isso Se você precisar de um outros ainda que vai ter que colocar um digito a mais vai ter que sair caçando todo mundo que que utiliza usa índice para ficar chutando valores porque você não vai percorrer todos os CSS da sua aplicação especialmente aplicação muito grande tá uma forma que a gente tem de fazer isso quem utiliza o sucesso por exemplo que é

um pré-processador é utilizar como se fosse uma receita eu tenho uma rei que vai gerenciar essa esses valores diz ainda que se eu consigo determinar por cada digamos por cada componente né um saindo diferente e aí eu deixo todos os índices da minha aplicação único lugar é muito mais fácil de gerenciar mas com CSS já seria uma boa ideia você tentar evitar esses números Mágicos né como a gente chama esses números que funcionam mas você não sabe muito bem porque só sabe aqui funciona então é isso eu vou ficando por aqui essa foi uma dica

muito rápida que eu quis deixar aqui para vocês se você gostou Já sabe de oi para mim e comenta que baixo qual que é a abordagem que você utiliza para gerenciar os seus elementos com os índices se você gostou desse vídeo aqui eu vou deixar duas sugestões de vídeos novos Muito provavelmente você vai gostar também bacana É isso aí um forte abraço e até o próximo vídeo até lá E aí