主题：【原创】CSS中相对位置、绝对位置的邪门问题 -- 铁手

按照一般理解，为了实现在某个内容块中的绝对位置定位，可以用以下的方式来实现：

<div id="AA" style="position:relative;background:#0f0;height:300px;">

<div id="BB" style="position:absolute;width:150px;height:50px;left:2px;top:2px;background:#00f;">

</div>

</div>

以上代码的结果就是 DIV BB (蓝色小块)在 DIV AA（绿色大块）内，左上角 2px 的地方开始显示。事实上也的确如此。

但是如果在 BB 之前加一些内容 CC 的话，按照正常理解，BB的显示位置相对于 AA 并不会改变，但是因此会遮盖住 CC 的一部分内容。事实也的确如此。为了显示上面的要求，比如西西河页面中的顶部菜单的实现，并希望 BB 显示在顶部的同时，也让 CC （红色小块） 中的所有内容都能够被看到。

<div id="AA" style="position:relative;background:#0f0;height:300px;">

<div id="CC" style="background:#f00;width:100px;height:100px"></div>

<div id="BB" style="position:absolute;width:150px;height:50px;left:2px;top:2px;background:#00f;">

</div>

</div>

一种方式是用 margin-top： <div id="CC" style="margin-top:100px;background:#f00;width:100px;height:100px"></div>

结果呢，BB在AA内的相对位置没有变，但是整个AA下移了margin-top:100px，似乎在CC中设定的 margin-top 也被加到了 AA 中。奇怪的是，这个时候，如果在 AA 中加入 border 的定义，则一切都变成设想中的那样，所有的位置就都正常。

<div id="AA" style="position:relative;background:#0f0;height:300px;border:1px solid green">

有border和没border的定义，会造成 AA 的 margin-top 的变化，实在是很奇怪。

另外一种方法，是在padding上打主意，用　padding-top:100px，则一切正常，而且AA的位置也正常，不需要定义border。

留个记号，供以后参考。不太想得通。