How to get bottom nav (btm-nav) from appearing above content

[MeikyuuTrader]

I've added a bottom navbar from the examples to my main layout class, however, the bottom navbar is always appearing above my content. That is to say my content gets cut off by the navbar.

Is this intended? Would there be anyway to make the bottom nav appear stickied at the bottom, but the inner content takes in the btm nav height and doesn't cut off content? Beyond calculating padding of the btm-nav and adding it the class

    <div className="h-screen">
      {header ? header : <Header />}
      <main className="">{children}</main>
      {footer ? footer : <Footer />}

      <div class="btm-nav">
          Cut out btm nav example from the site for brevity. 
      </div>
</div>
      </div>
    </div>

[vnugent]

Have you tried Tailwind z-index? z-10, z-50, etc

[MeikyuuTrader]

Setting z index to -1 makes the btm-nav appear under the main content.

I suppose I'd just have to do that, then add a margin to my main container so the content doesn't appear over the btm-nav. That is 4rem.

I think what I want isn't possible, because the bottom nav is position fixed. The bottom navigation is never apart of the div container size calculations, and children content act as if it doesn't exist. So just adding margin to the bottom of main is good enough.