ion-item and content is put above ion-tab

Question

how can I put the ion-tabs on top of all the displayed content.

<ion-content>
  /* ion-item*/         
</ion-content>
<ion-tabs>
   /*ion-tab*/
</ion-tabs> 

Answer 1

You shouldn't create your page inside the tabs file as your are doing now. You should create a separate component with your content, and then use your tabs you navigate to these components(Views). Here is an example of some code I wrote for a previous application I created:

<ion-tabs #tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="openModal()">
      <ion-icon name="add-circle-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab3" [disabled]="!isAutenticated">
      <ion-icon name="notifications-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs> 

As seen on the example each ion-tab-button references to a specific tab, these tabs will contain your content.

Hope that gave you some clarity.