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

Question

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

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

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

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

这可能吗？

Answer 1

默认情况下，在页面容器中设置绝对定位的元素，除非它们的父项具有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;
}

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