title: ionic 6 FAB in front of inlineModal
body: <p>I want to take the FAB as a order Button. When you click a item a Card Modal opens but now the FAB is in the Background. It should work like a submit button in a Form. Is there a reason to keep it in front?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.small-modals{
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
      --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
    // &amp;::part(backdrop){
      
    // }
    &amp;::part(content){
      width: 95%;
      height: 95%;
      margin: auto;
      border-radius: 10px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header&gt;
    &lt;ion-toolbar color="warning"&gt;
      &lt;ion-buttons slot="end" (click)="backButton()"&gt;
        &lt;ion-icon icon="home-outline" size="medium"&gt;&lt;/ion-icon&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;Tischübersicht {{id}}&lt;/ion-title&gt;
  
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;p&gt;PAGE CONTENT&lt;/p&gt; 
    &lt;ion-modal
    [isOpen]= isOpenPay
    [backdropDismiss] = "false"
    [showBackdrop]="false"
    [backdropBreakpoint] = 1
    class="small-modals"&gt;  &lt;!--INLINE MODAL OPENS --&gt;
    &lt;p&gt;MODAL CONTENT&lt;/p&gt;
    &lt;/ion-modal&gt;
  &lt;ion-fab vertical="bottom" horizontal="end" slot="fixed"&gt; &lt;!-- THIS FAB SHOUD BE IN FRONT THE WHOLE TIME --&gt;
    &lt;ion-fab-button  color="danger" (click)="addProdukt(id)"&gt;
      &lt;ion-icon name="ADD"&gt;&lt;/ion-icon&gt;
    &lt;/ion-fab-button&gt;
  &lt;/ion-fab&gt;
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>