css - 绝对定位的 Div 没有显示需要它的方式

Question

我正在尝试模仿此处所示的布局。 http://themeforest.net/item/real-homes-wordpress-real-estate-theme/full_screen_preview/5373914我已经构建了很多次，因为我正在学习如何让它响应浏览器的大小调整。无论如何，我已经将其剥离以弄清楚。我现在的问题是我有一个绝对定位的 div 嵌套在一个相对定位的 div 中。它位于右:0 和底部:0。但是它显示在顶部。它应该是一个包装 div，但我将它变成了一个简单的矩形，以便查看它是否正常工作。这是一个工作示例。 http://jsfiddle.net/3Dat6/

提前致谢

这是有问题的div

<div class="main-menu-and-contact-wrap"></div>

Answer 1

要使用绝对定位，您只需在将包含使用 position:absolute 的子元素的元素上指定 position:relative。

如果您的 CSS 无缘无故地到处指定 position:relative。

通过指定 position:relative，您可以为绝对定位的子元素定义原点。

因此在您的情况下，您应该只在 #headcontainer 元素上指定 position:relative。

此外，因为您使用的是 float 元素，#headcontainer 会折叠到零高度(为其添加边框，您会看到)。所以一定要清除你的 float 元素。