position:absolute 在前面时的意外表现

先看如下代码：

这段代码在各浏览器中的表现结果均相同，都是一个红色的块，距离窗口上方、左方 10 像素。

现在再看看另一段代码：

加了一个 position:absolute 的块，仍然幸运：各浏览器中的表现也是相同的。虽然 position 为 absolute，但由于没有指定 top 和 left，它接在布局流的后面，见下图：

由于 body 的 margin、padding 均为 0，所以绿色块顶到左边；由于红色块有 margin，所以绿色块和红色块之间有一点距离。

最后再看看另一段代码：

把两个 div 换一个位置，即让 position:absolute 的在前面，如下（为了便于您预览，我们把它放在可运行框中）：

烦人的结果来了：

左边是 Firefox 为代表的浏览器阵营的结果，右边是 IE 为代表的浏览器阵营的结果。

得出这么一个结论：

position:absolute 的块在 position:static 的块的前面时：

• Firefox 中不影响 static 块的布局；同时受 static 块的 margin-top 影响。
• IE 中影响 static 块的 margin-top；同时受 static 块的 margin-left 影响。

为什么会这样呢，我猜想是对解释顺序不同造成的，当然只是猜想。

如果把 static 的块换成 relative，结果是一样的，只是注意要指定 z-index，避免绿色块被覆盖。