html - 如何在底部区域放置菜单？

Question

我有这个网站:

http://eventos.dac-proiect.ro/

我想移动容器底部区域的菜单，如下图所示

http://i61.tinypic.com/33w4caq.jpg

此菜单的 CSS 代码:

.main-navigation {
    display: inline-block;
    float: left;
    width: 75%;
}

我试着这样做 position:absolute; bottom:0px; 但不起作用。

我在网站上找到了一些示例并设法实现了

我可以通过下拉菜单 margin-top: X value 但没有其他方法吗？

你能帮我解决这个问题吗？

提前致谢!

Answer 1

当你给一个元素 position:absolute 时，它被定位到最近的有位置的父元素，或者如果没有父元素被定位，则 body 。在您尝试赋予 position:absolute 的元素的父元素上使用 position:relative 是安全的。

所以在下面的代码中，我将 position:relative 指定给您要定位的元素的父元素。因此，所需元素的位置是相对于 .site-header 的。

我希望这对您有长远的帮助。

.site-header{
  position:relative;
 }

#site-navigation{
  position: absolute;
  bottom: 0;
}