Question

在页面顶部，我有一个已设置背景图像的div。我想将fab按钮放在这个div的右下角。完全像下面的图像。我怎么能这样做？

Answer 1

只需使用fabs附带的edge属性：

<ion-fab bottom right edge>
  <button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>

要实现此功能，内置工厂的div（或任何标记）必须将position设置为relative，absolute或fixed才能正常工作，position: inherit也可能有效，具体取决于父母的定位。

希望这有帮助。

Answer 2

感谢@Garrett和@Gabriel，我使用以下标记和scss工作。将FAB按钮放在我们想要分配背景图像的div中是很重要的，这样我们就可以使用relative定位：

<ion-content>

  <div id="header">
    <ion-fab bottom right edge>
      <button ion-fab><ion-icon name="camera"></ion-icon></button>
    </ion-fab>
  </div>

</ion-content>

scss文件：

#header {
  background-image: url('../assets/images/anonymous.jpg')!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 25vh;
}

ion-fab {
  position: relative;
}

ion-fab[bottom][edge] {
  bottom: -21vh;
}

.fab {
  margin-right: 3vw;
}

Answer 3

这是我可以开始工作的。这可以通过创建一个fab-container来覆盖此页面上的主容器。为此，您需要了解他们的高度。然后我们将fab-container z-index为1放在首位。然后我们可以使用flex来使工厂位于右下方。然后我们可以将晶圆厂上半部分的上半部分加到晶圆厂容器中，让晶圆厂中途徘徊。最后，我们可以添加保证金权限以使工厂脱离正确的一面。

这可能不是最好的方法，因为它需要知道容器的高度，但这是我接近这个任务的方式。

<ion-content>
    <div class="container"></div>
    <div class="fab-conatainer">
        <ion-fab class="fab">
            <button ion-fab>
                <ion-icon name="camera"></ion-icon>
            </button>
        </ion-fab>
    </div>
    <div class="contacts-container">
        <ion-list>
            <ion-item>
                <ion-input placeholder="Name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Phone"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Email"></ion-input>
            </ion-item>
       </ion-list>
    </div>
</ion-content>

CSS

  .container {
   width: 100%;
   background: #333;
   height: 500px;
 }

 .fab-conatainer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: 1;
  margin-top: 28px;
 }

 .fab {
  margin-right: 14px;
 }

如何将fab按钮放在div的边缘？

3 个答案: