Prezados,
Gostaria de compartilhar um problema que o meu projeto apresenta ao deixar dimensionado para o celular:
O pagination e o carrossel ficam em cima do menu. O que pode ser isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Prezados,
Gostaria de compartilhar um problema que o meu projeto apresenta ao deixar dimensionado para o celular:
O pagination e o carrossel ficam em cima do menu. O que pode ser isso?
Boa noite, Letícia. Poderia disponibilizar o seu código para entender melhor o problema?
Bom dia, Letícia. Depois de analisar seu código, vi que a tag "ul" que contém a classe "lista-menu" possui a propriedade "position" como "absolute", porém não foi definida a propriedade "z-index". Por padrão, será atribuído o valor 1 a ela:
.lista-menu {
display: none;
position: absolute;
top: 100%;
background-color: var(--branco);
width: 70vw;
}
O swiper (carrossel usado no projeto) por padrão tem a propriedade "position" como "relative" e, por padrão, a propriedade "z-index" é 1:
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
Quando dois elementos têm o mesmo valor de "z-index", o que determina a ordem de empilhamento no navegador é a ordem em que estão no código HTML. Ou seja, o último elemento no código ficará em cima dos outros.
Para resolver o problema, basta atribuir um valor maior que 1 para "z-index" na classe "lista-menu":
.lista-menu {
display: none;
position: absolute;
top: 100%;
background-color: var(--branco);
width: 70vw;
z-index: 10;
}
Espero ter ajudado!
Conseguii!
Agradeço a explicação Adriano, vou copiar ela nas minhas anotações sobre o projeto ok??
Abraços.