为什么 ion-fab-button 不能固定在 ionic 4 popover 内？答案

【问题标题】：Why ion-fab-button doesn't stay fixed inside ionic 4 popover?为什么 ion-fab-button 不能固定在 ionic 4 popover 内？
【发布时间】：2019-10-09 03:11:44
【问题描述】：

我正在开发一个 ionic 4 应用程序并创建了一个弹出框。在此弹出框内，我想使用必须固定在弹出框右上角的ion-fub-button。

我写的HTML代码是这样的：

<ion-content>
   <ion-fab vertical="top" horizontal="end" slot="fixed">
        <ion-fab-button (click)="getStats()">
            <ion-icon id="closeBTN" name="stats" color="light">
            </ion-icon>
        </ion-fab-button>
   </ion-fab>


   <div>
      ......
   </div>
</ion-content>

如您所见，我希望 ion-fab-button 应该在弹出框的右上角保持 FIXED，但实际上它并没有保持固定，而是随着其余内容滚动。谁能告诉我为什么以及如何解决它？

我还尝试将按钮插入到 ion-header 中，但 ion-header 也会与弹出框的其余部分一起滚动。而且我也尝试过为这个按钮使用 css position:fixed，但它不起作用。

有人可以帮帮我吗？

【问题讨论】：

标签： css angular ionic-framework position popover

【解决方案1】：

也许this link 会帮助你。在我的例子中，如果 ion-fab 被放置在 ion-content 内的自定义组件中，固定属性将无法正常工作。

【讨论】：

【解决方案2】：

这适用于我在 2021 年 2 月 25 日使用 Ionic 5

html

 <div class="fixed">

        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
          <ion-fab-button size="small">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
        </ion-fab>

      </div>

css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

【讨论】：