当我使用“position：relative”时，为什么会出现间隙？

Question

我目前正在一个网站上工作，在我建立时学习，我遇到了一个奇怪的问题......出于某种原因，我无法弄清楚为什么顶部之间存在大差距身体和内容。

问题可以在http://www.ruthpower.tk/看到。

这是simplified example on jsFiddle。为什么#wrapper的红色背景显示在上面#content？

Answer 1

使用position:absolute上的#button和position:relative上的#slideshow，然后使用绝对值定位#button。

请参阅http://www.w3.org/TR/css3-positioning/#relative-positioning / http://www.w3.org/TR/CSS2/visuren.html#relative-positioning：

  

相对定位的盒子保持其正常的流量大小，包括换行符和最初为其保留的空间。

更新：此example jsFiddle是simplified example的解决方案（请注意标记原始内容已发生变化的评论）。