Lightning spinner displaying over navigation

Question

I'm creating an LWC to display on a record page. When the spinner over the component is shown, it displays over the top navigation when you scroll down (shown below). Is there any way to change this behavior?

Basic structure of the html:

   <template>
       <lightning-card>
           <template if:true={showSpinner}>
               <lightning-spinner></lightning-spinner>
           </template>
           <template if:true={isData}>
             <!--more stuff-->
           </template>
       </lightning-card>
   </template>

Answer 1

Try putting the spineer on a higher level

  <template>
        <template if:true={showSpinner}>
            <lightning-spinner></lightning-spinner>
        </template>
       <lightning-card>
           <template if:true={isData}>
             <!--more stuff-->
           </template>
       </lightning-card>
   </template>