背景色隐藏在元素的框阴影上方

问题描述 投票:1回答:1

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
}
html css
1个回答
0
投票

而不是给main分配一个负的Z索引,只需将您的<nav>分配为position: relative并给它一个正的Z索引:

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

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>
© www.soinside.com 2019 - 2024. All rights reserved.