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>

Answer 2

I actually think this is a CSS bug on the Salesforce side, but I was able to fix it by overriding the CSS for the spinner.

<lightning-spinner if:true={showSpinner} class="spinnerOverride" variant="brand"></lightning-spinner>

And CSS:

.spinnerOverride{
    z-index: 97 !important;
}