正文显示在页脚问题后面？

Question

HTML：

<footer>
    <nav class="navbar-inverse" role="navigation"> <!--The inverse changes 
    the colour of the nav bar to black (AADDDDDD MORRRRRRREEE-->
<div>
<ul class="nav navbar-nav">
  <li><a href="#">Apple Music</a></li>
  <li><a href="#">Spotify</a></li>
  <li><a href="#">Shazam</a></li>
  <li><a href="#">SoundCloud</a></li>
  <li><a href="#">© 2018 GetMedia. All rights reserved.</a></li>

</ul>
</div>
</nav>

</footer>

CSS：

nav {

flex-grow: 1; 
position: fixed;
bottom: 0;
right: 0;
left: 0;
}

当页面缩小时，我不明白为什么正文内容显示在页脚后面？当我删除“位置：固定”时，它可以工作，但是这样做可以删除页脚所需的黑色背景。