O overlay não cobre alguns elementos | Angular parte 4: lapidando o projeto

1
resposta

Referente ao curso Angular parte 4: lapidando o projeto, no capítulo Menu da aplicação e atividade Estilo e template

por Caio Henrique Galli dos Santos

| 207.9k xp | 2 posts

O overlay criado não cobria alguns elementos, como os campos de input, o botao de login e a imagem na página de login. Para corrigir isso, foi necessário adicionar um z-index: 2 na barra de menu, e deixar um z-index: 1 no overlay.

.menu-bar {
    position: fixed;
    height: 100%;
    width: 90%;
    max-width: 320px;
    margin: 0;
    padding: 1em;
    background: #f0f0f0;
    top: 0;
    left: -90%;
    transition: left 0.3s ease-out;
    z-index: 2;
}

.active-menu .menu-bar{
    left: 0;
}

.active-menu .overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

1 resposta

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

06/03/2020

Fala ai Caio, tudo bem? Muito bem, parabéns pela solução.

Geralmente trabalhos com z-index com valores maiores, por exemplo: 1000.

É legal também trabalhar com variáveis, assim você consegue controlar qual z-index deveria ficar acima de outro, exemplo:

root {
    --zIndex-modal: 1000;
    --zIndex-menu: 999;
}

Ai você pode usar com a função var:

.meu-modal {
    z-index: var(--zIndex-modal);
}

.meu-menu {
    z-index: var(--zIndex-menu);
}

Isso com CSS puro.

Espero ter ajudado.