CSS相对和绝对定位元素拉伸容器

Question

你能解决我的困境吗？我有一个容器（在这种情况下是BODY），设置了position:relative。在里面我有两个div。一个relative和一个absolute定位（按此顺序）。

问题是每当我将margin-top设置为relative定位元素时，容器的高度（在这种情况下为body）会垂直拉伸。

例如，即使我已将height: 100%设置为容器，但查看时其大小为{％}} margin-top子元素的relative。

这是一个小提琴： http://jsfiddle.net/xJ75R/7/

Answer 1

首先，你不应该给身体一个相对位置，因为身体会占据整个页面。

无论如何，在将相对位置应用于另一个元素时要具体，所以如果你有一个“列表”类，那么使用

.lists { position: relative; top: something; left: something }

或保证金，或任何规则。

如果你在为其他元素提供一些余量之后只是遇到身体标签问题（虽然我不知道会发生这种情况），那么给身体一个0的边距，如：

body { margin: 0; }

如果这不起作用，那就使用！important如

body { margin: 0 !important; }

在旁注中，使用firebug插件for firefox，让你的CSS生活更轻松，并看看动态发生了什么。