Position详解---转

position有四个属性值：

1. relative
2. absolute
3. fixed
4. static

下面分别讲述这四个属性。

1. relative

relative属性，相对定位，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。relative的偏移是基于对象的margin的左上侧的。但是这货又比margin更为强大，如果单独使用这个属性的时候，一般情况下，你可以把这货看成是全能的margin，因为它可以在display:inline的时候起作用，这点上margin值的上下边距就不起作用了，当然margin负值的某些应用用这个属性就实现不了了。比如，子级的margin负值可以减小display:inline-block父级的宽度，从而实现类似圆角的自适应按钮。如图：

 

而这个时候relative就无法替代margin了。所以说它一般的单独使用的时候是更强大的margin，当然这个货有其他组合的应用。

2. absolute

这个属性是一个强大的魔鬼。当设置元素的属性为absolute时，这个元素就飘起来了。脱离了文档流，尼玛呀，又是这货，看到”文档流“，我猜大部分人都不是很明白这诡异的东西，那么下面，我就来点干货，解释下文档流，已经了然于胸的大神请略过这段。

文档流（普通流）：

将窗体自上而下分成一行行，并在每一行中按从左到右的顺序排放元素，即为文档流。

有三种情况将使得元素脱离文档流，分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。其中浮动引起的脱离文档流和定位引起的表现上又有所不同。关于这点不同，那就有待读者自行码demo了。

当元素的position设置为absolute后，元素将怎样进行偏移呢？这里分为两种情况：

(1) 当元素的父级(也可以是爷爷，或者是爷爷的爷爷)设置了position属性，且position的属性值为absolute或者relative时，这个时候，元素将按照这个父级来进行定位。
对象虽然确定好了，但有些地方需要思考，如果父级设定了 margin，border，padding等属性，那么这个定位点将从哪里开始呢？答案是从padding开始

(2) 如果元素的父级不存在一个有着position属性值为absolute或者relative的对象时，那么那就会以body为定位对象，这个比较容易理解。

3. fixed

fixed是相对于可视区域进行偏移的，不管你是不是拖动浏览器的滚动条，不管它的父级是谁，是天王老子，它都不会鸟你，如果不明白，请自行码demo，哦，one more thing：IE6这家伙是不支持的。如果要事先IE6 fixed的效果，可以用css表达式来解决这个问题。如图：

4. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。