當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; 
}