Question

所以，我有这个：

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

它应该做的事情非常简单，它可以完成这项工作。问题是，如果我尝试将它放在我的菜单中（css和html太长，这里是链接：http://goolag.pw/temptest.html）它要么完全破坏菜单本身，要么就是没有。显示，或者它不在底部。正如您所看到的，该线在菜单之外正好工作，但在其内部，它不会显示在底部。我尝试将它放在菜单的任何地方，我做错了什么？感谢您的帮助。

Answer 1

快速浏览一下......你需要设置一个包含所有内容的相对包装（或其他东西）的包装。您完全定位到底部，这意味着一旦菜单打开，该内容将确定父级的高度，以便该行到达底部，但它会转到菜单的底部。 / p>

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

Answer 2

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>

CSS：

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

我放置＆＃34; line＆＃34;内部＆＃34; nav＆＃34;并将它的z-index更改为1000.希望它有所帮助。

CSS动力菜单中的图像定位

2 个答案: