绝对定位的元素 - 它们可以位于相对定位的兄弟姐妹或父母之下

时间:2011-09-06 11:01:24

标签: html css css-position

我遇到了绝对定位子菜单的问题。你可以在这里看到它 -

http://jsfiddle.net/TeL7F/2/

我希望主菜单的黄色与子菜单的红色重叠。

理想情况下,我希望在不改变HTML的情况下实现这一目标。我可以能够添加课程,但这意味着与一些我不太了解的人进行大量争论。

这可能吗?

1 个答案:

答案 0 :(得分:0)

默认情况下,在页面容器中设置绝对定位的元素,除非它们的父项具有position属性的显式值,无论它是什么值。

因此,在您的示例中,您需要做的就是将position:relative;添加到.main_nav,这应该是全部。

更改后,.main_nav样式应如下所示:

.main_nav{
    float: left;
    height: 54px;
    list-style: none outside none;
    padding-right:5px;
    position:relative;
}

如果问题的另一部分尚未实现,请在此答案中添加评论。

<强>更新

根据您的第一条评论,您希望重叠部分在红色顶部为黄色,而不是在右上方为红色(如果不是,请更正我)。

这可以通过相同的修复程序实现,但应用于锚本身.main_nav a。请注意以下最后两个属性:

.main_nav a{
    line-height: 55px;
    padding: 20px 20px 50px 50px;
    text-decoration: none;
    background:yellow;
    z-index:100;
    position:relative;
}

如前所述,请在评论中根据您的要求讨论此部分。