Floating Action Button (FAB) nicht klebrig, wenn HTML-Seite Rollbalken hat

Question

Ich habe FAB-Taste auf der Seite, die Bildlaufleiste hat erstellt. Meine Erwartung ist, dass die FAB-Taste in der rechten unteren Ecke hängen bleibt, wenn die Seite gescrollt wird. Die Schaltfläche blättert jedoch auch mit der Seite. Dies gibt einen Hinweis darauf, dass der Z-Index von FAB auf dem gleichen Niveau wie andere HTML-Tags ist, aber in CSS habe ich den Z-Index von FAB als 1000 angegeben (also erwarte ich, dass er höher ist als andere Elemente auf der Seite)

Ich habe Geige erstellt, um das Problem zu replizieren. Kann jemand bitte

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

Ein bisschen spät Korrekturmaßnahmen überprüfen und bieten, aber position: fixed; ist wahrscheinlich das, was Sie suchen.

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