Html 移除正在下列div上投射的底部框阴影 我所拥有的：

我有一个导航菜单，每个链接都有一个框阴影

导航菜单下面紧跟着一个div，它触及链接的底部

框底阴影打破了我的选项卡式界面的幻觉

我需要的是： 我需要防止链接的框阴影投射到下面的div上

我的代码：

ul{
列表样式：外部无；
填充：0；边距：0；
}
李{
显示：内联块；
}
a{
背景颜色：灰色；
颜色：白色；
填充：20px；
边框左上半径：5px；
边框右上角半径：5px；
显示：内联块；
文字装饰：无；
盒影：1px 1px 3px#222；
}
.选择a{
背景颜色：蓝色；
}
div{
背景颜色：蓝色；
高度：20px；
}

非常简单：

只需添加

位置：相对到
div

div {
    position: relative; /* add this */
    background-color: blue;
    height: 20px;
}

演示：

为什么这样做？

基本上，您需要建立堆叠上下文，以便使用z索引对布局进行分层

要做到这一点，需要为层明确定义定位和z索引

但是，因为在您的案例中只有两层，链接容器和它下面的条，您可以省略额外的定义，因为在链接下面的条上定义定位就足够了

这是一个较长的版本，将为您完成工作：

nav {
    position: relative;
    z-index: 1;
}
div {
    position: relative;
    z-index: 2;
    background-color: blue;
    height: 20px;
}

演示
这个简洁的解决方案有效。感谢您的编辑解释了它的工作原理。我最初把它归因于你的神秘CSS魔法。我试过玩z-index，但没有意识到定位是必要的。再次感谢。