Button back to the top is not overlapping the footer

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

Someone strengthens 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>