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; 可能就是您要找的。​​p>

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