Question

我有这个网站：

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

菜单的代码CSS：

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

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

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

我可以关闭菜单margin-top: X value，但没有其他方法吗？

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

提前致谢！

Answer 1

如果您将position:absolute提供给元素，则将其定位到最近的父级位置或body（如果没有父级位置）。在您尝试提供position:relative的元素的父元素上使用position:absolute是安全的。

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

我希望这可以帮助你长久。

.site-header{
  position:relative;
 }

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

Answer 2

您可以添加padding-top，例如

.main-navigation {
    float: left;
    width: 75%;
    padding-top: 70px;
}

inline-block是不必要的

Answer 3

只需将HTML代码段放在HTML文档的底部即可。