1
resposta

[Bug] As bolinhas do carrosel estão por cima da lista.

Aqui segue a imagem e o link do meu projeto : https://github.com/Matheuslc7/Alura-books

1 resposta

Olá Matheus, tudo bem?

Peço desculpas pela demora em obter um retorno

Primeiramente gostaria de agradecer por compartilhar o seu repositório conosco isso no ajuda muito a sanar dúvidas.

Primeiramente é necessário acessarmos a classe do CSS, que é responsável pela "bolinhas", ou seja, na pasta style e no arquivo carrosel.css, vamos acessar a classe .swiper-pagination e passamos os seguinte valores.

.swiper-pagination {
    position: relative;
    z-index: 1; /* valor padrão */
    margin: .5em 0;
}

Utilizei o Z-index com o valor 1 que por sinal é o padrão, mas deixo aqui a fim de aprendizagem, para o mesmo ser habilitado é necessário usar o position, por fim vamos, colocar a lista por cima das bolinhas.

Para isso vamos acessar a lista dentro da pasta style e depois no arquivo header.css, na classe lista-menu, adicionar o z-index para 2, ficando assim:

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
    z-index: 2; //nova linha adicionada
}

Desse modo a lista se torna o principal item a ser observado passando por cima dos demais como no caso das bolinhas.

Espero ter ajudado, qualquer dúvida me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!