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

当html页面有滚动条时，浮动操作按钮（FAB）不粘

1 个答案: