关于css样式绝对定位、相对定位、固定定位的疑难杂症

static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

默认就是static。

relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 说了这么多专业的，有些小伙伴就看不下去了吧，下面我们就上图给你理解。

这就是代码对应的左边的图。现在我们逐个加上定位看看效果。

相对定位和绝对定位 position:relative   position:absulute

黑圆相对于橙色的矩形绝对定位了，脱开了一切约束，根据relative相对定位的元素进行移动，就是left、top控制的，相对的，还有right、bottom也可以控制的。

在看看固定定位 position:fixed

fixed和相对定位relative没什么绝对的关系，是根据浏览器窗口来决定位置的，这里我们给了小黑q球一个top:200px，虽然她的标签在oDIv中，但是并不会受oDiv位置的影响，这就是fixed，一般多用于网站的某一模块固定在哪一部分采用的。