我拥有的：

Question

我拥有的：

我有一个导航菜单，其中包含分配给每个链接的框阴影。

导航菜单下方会有一个触及链接底部的div。

盒子阴影的底部打破了我的标签界面的错觉。

我需要什么：

我需要防止链接的盒子阴影在下面的div上进行投射。

我的代码：

＆＃13;

ul {
  list-style: outside none none;
  padding:0; margin:0;
}
li {
  display: inline-block;
}
a {
  background-color: grey;
  color: white;
  padding: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  text-decoration:none;
  box-shadow: 1px 1px 3px #222;
}
.selected a{
  background-color: blue;
}
div {
  background-color: blue;
  height: 20px;
}

＆＃13;

<nav>
  <ul>
    <li class="selected"><a href="#">Home</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="divider"></div>

＆＃13;

Answer 1

很简单：

只需将position:relative;添加到div

即可

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

演示： http://jsfiddle.net/a2wLb1fz/

为什么这样做？

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

为此，您需要为图层指定明确定义的z-index。

但是，因为在你的情况下它只有两层，即链接容器和它下面的栏，你可以省略额外的定义，因为在链接下面的栏上定义定位就足够了。

这是为您完成工作的更长版本：

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

演示 http://jsfiddle.net/a2wLb1fz/1/

删除在下一个div

我拥有的：

我需要什么：

我的代码：

1 个答案: