Html CSS菜单中的图像定位

所以，我有这个：

 .line {
    width:100%;
    height:4px;
    background-repeat: repeat-x;
    background-image: url("http://goolag.pw/line2.png");
    position:absolute;
    bottom:0px;
}

---

这很简单，应该做什么，它做的工作。问题是，如果我试着把它放在我的菜单中（css和html太长了，这里是链接：）它要么完全破坏了菜单本身，要么就是不显示，要么就是不在底部。。正如您所看到的，该行在菜单外部运行良好，但在菜单内部，它不会显示在底部。我试着把它放在菜单上，我做错什么了吗？谢谢你的帮助。

请快速浏览一下。。。您需要将覆盖所有内容的overall包装器设置为（或somethingto）relative。你的位置绝对在底部，这意味着一旦菜单打开，内容就决定了父菜单的高度，所以这条线就到了底部，但它就到了菜单的底部

在包含元素上设置position:relative，或者检查任何脚本或注入的css，以确保当菜单滚动到位时，position:relative没有在包含菜单的div上设置。

HTML:

    <nav>
        <div class="line"></div>
        <ul>
       <li><a href="index.html">Home</a></li>
           <li><a href="goolag_games.html">Goolag Games</a></li>
           <li><a href="wai.html">Who am I?</a></li>
           <li><a href="wita.html">What is this about?</a></li> 
           <li><a href="contact.html">Contact</a></li>
       </ul>
   </nav>

---

我将“line”放在“nav”的内部，并将其z索引改为1000。希望有帮助。

链接未打开。你能躲开它吗？给你，可能不一样。我不明白这个问题。我看到触点下面的线路很好。它应该在菜单中的什么位置？在底部，正如CSS.行所示。基本上就在你没有菜单的地方。。我对HTML不是很在行，你说的一半我都不懂。好吧，它可以做到，但是有没有办法让它只出现在菜单上？

.line {
    width:100%;
    height:4px;
    background-repeat: repeat-x;
    background-image: url("http://goolag.pw/line2.png");
    position:absolute;
    bottom:0px;
    z-index: 1000;
}