Tabs dont work correctly

Hi people!!

I have a problem, when I scroll my app the tabs move to the top, Do you know how can I fix it?
image image2
Here is my code :smile:

<ion-content size="6">
  <ion-header class="header">
    <ion-toolbar>
      <ion-chip class="chip">
        <ion-icon class="avatar" name="contact"></ion-icon>
        <ion-label>{{ Usuario[0].Nombre }}</ion-label>
      </ion-chip>
    </ion-toolbar>
  </ion-header>
  <ion-avatar class="avatar2" size="6" >
    <img [src]="image" /> <br />
  </ion-avatar>

  
  <ion-item text-center>
  <ion-label class="letra2" text>{{ Usuario[0].Nombre }} {{Usuario[0].Apellido}}</ion-label> <br />
 </ion-item>
 <ion-item text-center> 
  <ion-label class="letra2">{{ Usuario[0].Correo }}</ion-label>
</ion-item>

  <ion-card class="secondCard">
    <ion-title class="letraMain">Perfil de usuario </ion-title>
    <ion-list class="letras">
      <ion-item>
        <ion-label>
          <h2 class="letras">Nombre</h2>
          <h3>{{ Usuario[0].Nombre }}</h3>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          <h2 class="letras">Genero</h2>
          <h3>{{Usuario[0].Genero}}</h3>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          <h2 class="letras">Puesto</h2>
          <h3>{{ Usuario[0].Puesto }}</h3>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          <h2>Telefono</h2>
          <h3>{{ Usuario[0].Telefono }}</h3>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          <h2 class="letras">Cumpleaños</h2>
          <h3>{{ Usuario[0].Cumple }}</h3>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
  <ion-tabs class="tabs1">
      <ion-tab-bar slot="bottom">
        <ion-tab-button (click)="produccion()">
          <ion-icon name="hammer"></ion-icon>
          <ion-label>Produccion</ion-label>
        </ion-tab-button>
  
        <ion-tab-button (click)="switch()">
          <ion-icon name="power"></ion-icon>
          <ion-label>Switch</ion-label>
        </ion-tab-button>
  
        <ion-tab-button (click)="usuario()">
          <ion-icon name="person"></ion-icon>
          <ion-label>Usuario</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
</ion-content>


Move out your tabs from the content.
You shouldn’t have your tabs/menu in the same page as the content of your page.