Html Z索引属性不起作用

以下是我所做的：

是来自

类的
活动的
，因此它有一个白色的
边框底部
，因此我假设覆盖div的黑色边框，看起来在该
下没有边框-它不这样做

div的属性是
z-index:-1
，它的
位置是
相对的

为什么还没有结束？我该如何修复它？
谢谢你的帮助

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

html:

注：更新后的答案如下

这就是你想要达到的目标吗


变化：

如前所述，
z-index:1px无效

移除
边框底部：1px纯黑色来自

a:悬停的z索引应该大于其他的（设置为2）和白色背景（默认为透明）
如果不明白您的问题是否是为什么在页面上看到黑线。在这种情况下，请注意，因为菜单和黑线没有重叠

这里我想指出的另一点是，您的li元素具有背景色：透明；因此，即使菜单有更多的z索引，当它们与元素重叠时，您也会看到黑线。如果将“背景色”设置为白色并进行检查，您将看到差异

正如我提到的，元素没有重叠，这样做，您将有一个底部没有黑线的选中选项卡。现在它们重叠了，你看不到黑线，一切正常

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

万一z-index:1px无效，它应该是z-index:1，仅供参考。实际上，div在菜单下面。您在%中设置的高度无效，因此它的高度为0。您需要首先将它们放置在彼此的顶部。将其更改为1，但它仍然无法按运行，除了任何JSFIDLE之外，您还必须在OP中发布代码。@TilwinJoy这是否重要？我只希望div的边框在menui下面，希望只有from类处于活动状态，看起来它下面没有边框，所以只有边框底部白色已经将z索引更改为1，没有帮助。我试过把背景色改成白色，也没有做任何改变：请告诉我你想完成什么，这样我可以更好地帮助你。我看到黑线没有与菜单重叠，因此在您的示例中一切正常。我回答说，检查更新，你需要更多的填充来让元素重叠。我没想到，我希望边界重叠。这也行！非常感谢你
#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;
}

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