CSS中position布局

1、绝对定位(position: absolute) 最接近的一个具有定位属性的父包含块进行绝对定位。absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。 


2、相对定位(position: relative)  确定元素在正常文档流中的偏移位置。在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。


3、固定定位(position: fixed)
fixed  一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用

4、默认值(position:static)没有定位，元素正常出现在流中。

相对于其它元素进行定位的方法：

参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative，定位元素加入position:absolute，再使用 top 、 right 、 bottom 和 left 属性进行定位。

relative与absolute的主要区别： 
一、对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。
二、在正常流中的位置存在与否。relative定位的层在正常流中仍存在，absolute定位的层在正常流中不存在。