【问题标题】：CSS Relative and Absolute Positioned Elements Stretch the ContainerCSS 相对和绝对定位元素拉伸容器
【发布时间】：2012-09-10 00:51:44
【问题描述】：
你能帮我解决我的困境吗？我有一个设置了position:relative 的容器（在本例中为 BODY）。在里面我有两个div。一个relative 和一个absolute 已定位（按此顺序）。
问题是每当我将一些margin-top 设置为relative 定位元素时，容器的高度（在本例中为body）会垂直延伸。
例如，即使我已将 height: 100% 设置为容器，查看时它的大小是 100% + relative 定位子元素的 margin-top。
这是一个小提琴：
http://jsfiddle.net/xJ75R/7/
【问题讨论】：
标签：
css
height
css-position
【解决方案1】：
首先，你不应该给 body 一个相对位置，因为 body 占据了整个页面。
无论如何，在将相对位置应用于另一个元素时要具体，所以如果你有一个“列表”类，那么使用
.lists { position: relative; top: something; left: something }
或边距，或任何规则。
如果你只是在给另一个元素留出一些边距后发现 body 标签有问题（虽然我不明白这是怎么发生的），那么给 body 留一个 0 的边距，比如：
body { margin: 0; }
如果这不起作用，那么使用 !important like
body { margin: 0 !important; }
附带说明，使用 firebug 的 firebug 插件让您的 CSS 生活更轻松，并即时查看正在发生的事情。