Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como sobrepor o carrossel

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Media Queries

por SAUL HENRIQUE ARAUJO VASCONCELOS ANDRADE
| 11.4k xp | 11 posts

Boa tarde galera, alguém consegue me ajudar com esse detalhe? Quando eu abro o menu hamburguer, o carrossel fica sobrepondo ele, na parte inferior. Como eu posso fazer o menu sobrepor as bolinhas do carrossel?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<section class="carrossel">
        <h2 class="carrossel__titulo">Últimos Lançamentos</h2>
        <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <!-- If we need pagination -->
        <div class="swiper-pagination">
        </div>

.swiper-pagination{
    position: initial;
    margin: 1em 0;
}
1 resposta
solução!
por Victor Costa Santos
| 1918.5k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá, Saul! Tudo bem?

Isso pode ser resolvido com a propriedade z-index do CSS. Essa propriedade controla a ordem de empilhamento dos elementos. Um elemento com um z-index maior sempre estará na frente de um elemento com um z-index menor.

No seu caso, é necessário adicionar um z-index maior para o menu hambúrguer do que o que está definido para o carrossel. Verifique se você possui uma classe chamada "lista-menu" ou algo semelhante, com base nos arquivos da aula. Essa classe costuma estar no arquivo header.css e deve ser declarada no HTML. Por fim, insira o z-index conforme abaixo:

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

Nesse exemplo, o menu hambúrguer sempre ficará na frente do carrossel, pois seu z-index é maior. Lembre-se de substituir .lista-menu pela classe correta do seu menu, se for a mesma desconsidere.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

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