如何使离子元素漂浮在离子头上

Question

我想让图标位于标题和内容部分之间

但它继续在标题部分下..

这是我得到的结果：

我的html代码

<ion-header >
<ion-toolbar class="header">
  <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
  </ion-buttons>
  <ion-title class="app-title" text-center>My app</ion-title>
</ion-toolbar>

<ion-toolbar class="header">
    <ion-row>
        <ion-col text-center routerLink="/mails-to-sign">
          <p class="stat-title">Courriers à signer</p>
        </ion-col>
        <div class="verticalLine"></div>          
        <ion-col text-center routerLink="/action"> 
            <p class="stat-title"> Actions à réaliser </p>
        </ion-col>
        <div class="verticalLine"></div>
        <ion-col  text-center routerLink="/refused-mails"></p>
            <p class="stat-title">Courriers transmit</p>
        </ion-col>
      </ion-row>

</ion-toolbar>

<ion-content>
    <ion-icon class="add-mail-btn" color="success" name="add-circle"></ion-icon>
</ion-content>

我的 CSS

.add-mail-btn{
 font-size: 60px;
 position: absolute;
 top: -5%;
 left: 79%;    
}

Answer 1

您似乎正在寻找 ion-fab 组件：

<ion-content>
 <!-- 
      fab placed to the top and end and on the top edge 
      of the content overlapping header 
 -->
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person"></ion-icon>
    </ion-fab-button>
  </ion-fab>

...

</ion-content>

请注意，按钮的位置是通过使用以下properties实现的：vertical="top" horizontal="end" edge