How to make ion-element float on ion-header

I want to make the icon goes between the header and content section

but its keep going UNDER the header section..

This is the result I get:

my html code

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

My css

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