先頭へ戻るテキストの下に隠す

Question

私のMVCプロジェクトのトップに戻るリンクを表示しています。 レイアウト：

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a> 

のCss：

.back-to-top { 
    cursor: pointer; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    display:none; 
} 

JS：

$(window).scroll(function() { 
       if ($(this).scrollTop() > 50) { 
        $('#back-to-top').fadeIn(); 
       } else { 
        $('#back-to-top').fadeOut(); 
       } 
      }); 
      // scroll body to 0px on click 
      $('#back-to-top').click(function() { 
       $('#back-to-top').tooltip('hide'); 
       $('body,html').animate({ 
        scrollTop: 0 
       }, 800); 
       return false; 
      }); 

      $('#back-to-top').tooltip('show'); 

このボタン/リンク、正常に動作しています。一部のページでは、ボディのコンテンツ/テーブルの下に隠れています。一部のページで正しく表示されています（テキストの前に）。 すべてのページのテキストの前にこのリンクを表示します。 これを解決するのを手伝ってください。

Answer 1

は単にその要素のためz-indexを設定します。

.back-to-top { 
    cursor: pointer; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    display: none; 

    z-index: 9999; 
} 

Answer 2

私は解決策を発見しました。 z-indexを追加したばかりです：99999; cssに。 正常に動作しています。

Answer 3

z-index

.back-to-top { 
    cursor: pointer; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    display:none; 

    z-index: 9999999; 
} 

で使用