Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Carrossel sobrepondo header na rolagem

No meu projeto, eu quero que o header continue visivel na tela mesmo quando eu rolar pra baixo na pagina, então adicionei "position: sticky;" no css e funcionou tudo bem. Porém, apos adicionar o carrossel do SwiperJS, percebi que o carrossel e a pagination, ambos, se sobrepoem ao header quando rolo para baixo na pagina. Como posso resolver isso? Tentei mudar a "position" tanto do header quanto do carrossel, mas segue sobrepondo na mesma.

Peço perdão pela falta de alguns acentos aqui e ali, mas estou com limitaçoes no teclado atualmente.

captura de tela do webtools

2 respostas
solução!

Olá, Matheus!

Analisando a sua mensagem, penso que a solução pode ser na adição de um z-index no header. Ele basicamente define a prioridade do elemento, ou seja, se outro vai sobrepor ou não. Abaixo fiz um código básico só para ter uma noção.

header {
  position: sticky;
  top: 0;
  z-index: 1000; /* ou um valor alto o suficiente */
  background-color: #fff;
}

Certifique-se de que no Swiper não possui z-index maior que o selecionado por você.

Muito obrigado, irmão! Era bem isso.