当前位置：文江博客话题详情

绝对定位元素 - 它们可以位于相对定位的兄弟元素或父元素下方吗

发布于 2024-12-03 07:11:09 字数 258 浏览 0 评论 0原文

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

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

我想要主菜单的黄色与子菜单的红色重叠。

理想情况下，我希望在不以任何方式更改 HTML 的情况下实现这一目标。我也许能够添加课程，但这意味着与一些我并不真正认识的人发生激烈的争论。

这可能吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖 2024-12-10 07:11:09

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

和以前一样，请在评论中根据您的要求讨论这部分。

Absolutely positioned elements are set within the page container by default, unless their parent has an explicit value for position property, regardless of what value it is.

So, in your example, all you need to do is add position:relative; to .main_nav, and that should be all.

After change, the .main_nav style should look like:

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

Please add a comment to this answer if there is another part to the question not achieved yet.

Update:

As per your first comment, you want the overlapped part to be yellow on top of red instead of red on top of right (please correct me if otherwise).

This can be achieved with the same fix, but applied to the anchor itself .main_nav a. Note the last two properties below:

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

As before, please discuss this part against your requirement in the comments.

回复收藏 0 原文

~没有更多了~