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
}
而不是给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>