Цвет фона скрывается над box-shadow элемента

Question

nav {
  position: static;
  box-shadow: 0 1px 4px 0px rgba(149, 143, 143, 0.5);
}

main {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
}

.main__center {
  background: #F2F3F5
}

<nav> 
  <a href="#">Home</a> | 
  <a href="#">Languages</a>         
</nav> 
<main>
  <div> Main </div>
  <div class="main__center"></div>
  <div></div>
</main>

Я могу добавить свойство box-shadow к nav, и оно показывает, что все в порядке. Под навигацией у меня есть 3-колонный main, где центр имеет другой цвет bg. Когда я добавляю этот цвет или белый цвет в столбцы сетки, я теряю тень навигационного блока. Есть ли способ сделать так, чтобы окно показывало независимо от того, прокручивается ли основной элемент под nav? Добавление position: relative; z-index: -1 к main работает, но в main.

<nav></nav>
<main>
  <div></div>
  <div class="main__center"></div>
  <div></div>
</main>

стиль не активен:

nav {
 position: static;
 box-shadow: 0 1px 4px 0px rgba(149,143,143,0.5);
}

main {
 display: grid;
 grid-template-columns: 25% 1fr 25%;
}

.main__center {
 background: #F2F3F5
}

Answer 1

Вместо присвоения отрицательного Z-индекса main, просто присвойте <nav> как position: relative:

nav {
  position: relative;
  box-shadow: 0 1px 4px 0px rgba(149, 143, 143, 0.5);
}

main {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
}

.main__center {
  background: #F2F3F5
}

<nav> 
  <a href="#">Home</a> | 
  <a href="#">Languages</a>         
</nav> 
<main>
  <div> Main </div>
  <div class="main__center"></div>
  <div></div>
</main>