Question

这就是我所做的：fiddle

<li id="L1">来自class active所以它的颜色为border-bottom白色，所以我想覆盖div的黑色边框，看起来就像在<li>没有边界 - 它没有这样做

div的属性为z-index:-1，而position为relative。

为什么不结束？我该如何解决？谢谢你的帮助

如果你不介意，请用你的答案更新小提琴

HTML：

    <div id='settingNev' style="width:100%; height:100%;" >
<ul style="left:200px; z-index:1px;">
  <li id="L1" class="active" runat="server"><a id="A1" href="../newsFeed/allEr.aspx" runat="server"><span>Er</span></a></li>
   <li id="L2" runat="server"><a id="A2" href="../newsFeed/allEe.aspx" runat="server"><span>Ee</span></a></li>
   <li id="L3" runat="server"><a id="A3" href="#" runat="server"><span>Contact</span></a></li>
   <li id="L4" runat="server"><a id="A4" href="#" runat="server"><span>2</span></a></li>
</ul>
<div style="border-top:1px solid ; position:relative; top:-11px; background-color:white; width:130%; height:60%; z-index:-1"></div>
</div>

的CSS：

#settingNev
{
}
#settingNev ul {
    display:block;
    position:relative;
}
#settingNev ul li {
    display:inline;
    background-color:transparent;
}
#settingNev ul li a {
    display: inline;
    border-radius: 6px 6px 0px 0px;
    color: #666;
    padding: 6px 3px 6px 4px;
    border: 1px solid transparent;
    border-bottom: 1px solid black;
    margin: 1px 0 1px 1px;
}

#settingNev .active a
{
    border: 1px solid black;
    border-bottom: 1px solid white;
    margin: 0;
    padding: 5px 3px;
    background-color:White;
}
#settingNev ul li a:hover {
    border: 1px solid black;
    padding: 6px 3px 6px 4px;
}
#settingNev .active a:hover {
    border: 1px solid black;
    border-bottom: 1px solid white;
    margin: 0;
    padding: 5px 3px;
}

Answer 1

如果您不明白这里的问题是否是您在页面上看到黑线的原因。在这种情况下，咖啡馆是因为菜单和黑线没有重叠。

我想指出的另一件事是你的li元素有背景颜色：透明;所以，即使菜单中有更多的z-index，当它们与你的元素重叠时，你会看到黑线。如果将背景颜色设置为白色并将其检出，您将看到差异。

正如我所提到的，元素不重叠，执行此操作，您将在选定的选项卡底部没有黑线。现在它们重叠，你看不到黑线，一切都运作良好。

#settingNev .active a {
    padding-bottom: 6px;
}

以防z-index：1px无效，应为z-index：1

Answer 2

注意：更新了以下答案。

这是你想要实现的目标吗？

http://jsfiddle.net/2fDQz/49/

的变化：

如上所述，z-index:1px;无效。

从border-bottom: 1px solid black;

中删除<a>

a：hover的z-index应大于其他z-index（设置为2）和白色背景（默认为透明）

Z-index属性不起作用

2 个答案: