1

是）我有的：

我有一个导航菜单，其中为每个链接分配了框阴影。

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

盒子阴影的底部打破了我的选项卡式界面的错觉。

我需要的：

我需要防止链接的框阴影投射到以下 div 上。

我的代码：

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;
}
<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>

4

1 回答 1

2

非常简单：

只需添加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/

于 2015-07-15T21:19:38.233 回答