- 发帖可能变空内容，邪门暂不知所以然
- 『稷下学宫』新认证方式，24年网站打算和努力目标
主题：【原创】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。
留个记号，供以后参考。不太想得通。
我觉得吧，如果不是专门做这个CSS的，就很难搞清楚，我就是一点点的试，没办法～～
CSS 的位置模型和想象中的不太一样，有很多冲突算法在里面。 比如：Vertical margins may collapse between certain boxes。 再加上具体Browser未必都按照CSS spec实现，所以具体结果的确比较复杂。
难道这就是今天找不到顶部菜单的原因？
CSS: Margin-top when parent's got no border
请查看以下连接。
http://www.webdevout.net/browser-support-css
http://www.complexspiral.com/publications/uncollapsing-margins/
http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
这个问题上面那位兄弟的引用已经给出了，margin-top会和上一个元素的margin-bottom合并；如果你想达到你原来设想的效果，一种方法是，在垂直方向上，相关元素只用margin-bottom，或者用padding来代替。这个书上有讲，也可以通过观察一些网站的css获得经验，推荐豆瓣。