html – Background colour hides above element's box-shadow-ThrowExceptions

Exception or error:
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>

I can add a box-shadow property to the nav and it shows ok. Below the nav, I have a 3-col main where the center has a different bg color. When I added that color or white to either grid cols, I lose the nav box shadow. Is there a way to make the box show show no matter if main element is scrolled up underneath the nav? Adding position: relative; z-index: -1 to main works but nothing is clickable within main.

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

Style:

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
}
How to solve:

Instead of assigning a negative Z-index to main, just assign your <nav> as 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>

Leave a Reply

Your email address will not be published. Required fields are marked *