[jQuery][CSS] 戻るボタンが背面に隠れてしまう。

Question

Bootstrap3でできているテンプレートに、画面が少ししたに下方に動いたら、画面の上にもどるボタンを表したいと思いますが、CSSの書き方で、わからない部分があるので質問します。

下記のようなコードで、丸角の四角い戻るボタンが現れるようにしました。表示もされますし、クリックしても画面の上部に戻るので機能的には問題はないのですが、いくつか部分的に、他のクラスで定義した写真や記事の文章の背面に潜り込んでしまうことがあります。背面ではなく、前面に出したいのですが、どのようにすればよいでしょうか? このあたりがわかりません。

html

<p id="page-top"><a href="#">PAGE TOP</a></p>

bootstrap.min.jp 最終行に追加

$(function() {
    var topBtn = $('#page-top');   
    topBtn.hide();
    //スクロールが500に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

css

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 25px 0;
    text-align: center;
    display: block;
    border-radius: 10px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

Answer 1

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
    z-index: 999; /* これでどうですか？ */
}

Comments

[xjaPANDA]

ありがとうこざいます。　z-index っていうプロパティを初めて知ることになり、よい勉強になりました。感謝です!