Back to top button is not overwriting the footer

Question

I have the following problem, I created a button back to the top, positioned it in the lower right corner and gave a position:fixed in it. I’m making use of jQuery library. The problem occurred when the scroll bar reached the end, the button ended up hiding under the footer. The solution was to decrease the size of the footer at the distance I had positioned the button at the top of the page. I would like that when it reached the end, it would be overlapping the footer.

Somebody strengthen the boys!

<!-- 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>

Answer 1

I believe this link helps you:

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

and that example taken also from the above site help you to better understand, I suggest you change the value of the property z-index that is in -1 to 0, to see its effect, I believe it will solve your problem.