1

Estou com o seguinte problema, criei um botão de volta ao topo, posicionei ele no canto inferior direito e dei um position:fixed nele. Estou fazendo uso da biblioteca jQuery. O problema ocorria quando a barra de rolagem chegava ao final, o botão acabava se escondendo por baixo do rodapé. A solução foi diminuir o tamanho do footer na distância que eu tinha posicionado o botão do topo da página. Gostaria que quando ele chegasse ao final, ele ficasse sobrepondo o footer.

Alguém fortalece ai rapazes!

<!-- código CSS que se aplica ao botão -->

.btn-up {
        width: 80px;
        height: 50px;
        position: fixed;
        top: 480px;
        margin-left: 1260px;
        font-family: tahoma, arial;
        font-size: 1.5em;
        text-height: 50px;
        color: #FFF;
        background-color: #666;
        border: 2px solid #333;
        border-radius: 5px;
        box-shadow: 2px 2px 15px #000; 
}

.btn-up:hover {
        background-color: #DC143C;
        box-shadow: 2px 2px 15px #F00;
}


<!-- HTML -->

<button class="btn-up">Subir</button>


<!-- script -->
<script>

        var subir = $(".btn-up");

        $(window).scroll(function() {
            var minhaposicao = $(this).scrollTop();
            if(minhaposicao >= 1080) {
            subir.fadeIn();
            }else {
                subir.fadeOut();
            }
})
        subir.on("click", function() {
            $("html, body").animate({scrollTop: 0}, 500);
})
</script>
2
  • Adiciona no teu Button a propriedade z-index:1
    – Bia Silva
    Commented 21/07/2018 às 17:56
  • valeu Bia era isso mesmo! Commented 21/07/2018 às 18:51

1 Resposta 1

1

Acredito que esse link o ajude:

https://www.w3schools.com/cssref/pr_pos_z-index.asp

e esse exemplo retirado também do site acima o ajude a entender melhor, sugiro que altere o valor da propriedade z-index que está em -1 para 0, para ver o seu efeito, acredito que vai resolver o seu problema.

1
  • mudei para 0 e continuou da mesma maneira, fiz o que a @Bia Silva sugeriu e deu certo. Porém vou ler o que me mandou Commented 21/07/2018 às 18:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .