htmlページにスクロールバーがあるときに浮動アクションボタン（FAB）がスティッキーでない

Question

スクロールバーを持つページにFABボタンを作成しました。ページがスクロールしているとき、私の期待はFABボタンが右下隅に付いていることです。ただし、ボタンはページとともにスクロールします。これは、FABのz-indexが他のHTMLタグと同じレベルであることを示していますが、CSSでは、特にFABのz-indexを1000と指定しています（ページ上の他の要素よりも高いと思われます）。

私は問題を再現するためにフィドルを作成しました。誰もがチェックし、提供是正措置を

https://jsfiddle.net/jh7mv590/2/

<div class="container"> 
<div class="row"> 
      <div id="inbox"> 
     <div class="fab btn-group show-on-hover dropup"> 
      <div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;"> 
     <button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown"> 
     <span class="fa-stack fa-2x"> 
      <i class="fa fa-circle fa-stack-2x fab-backdrop"></i> 
      <i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i> 
      <i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i> 
     </span> 
     </button></div> 
     <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
     <li><a href="#" data-toggle="tooltip" data-placement="left" title="Coffee"><i class="fa fa-coffee"></i></a></li> 
     <li><a href="#" data-toggle="tooltip" data-placement="left" title="LiveChat"><i class="fa fa-comments-o"></i></a></li> 
     <li><a href="#" data-toggle="tooltip" data-placement="left" title="Reminders"><i class="fa fa-hand-o-up"></i></a></li> 
     <li><a href="#" data-toggle="tooltip" data-placement="left" title="Invites"><i class="fa fa-ticket"></i></a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

少し遅れて、しかしposition: fixed;は、あなたが探しているものはおそらくですしてくださいすることができます。

.show-on-hover { 
    position: fixed; 
    bottom: 50px; 
    right: 50px; 
}