position有四个属性值:
- relative
- absolute
- fixed
- 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属性时,会按照正常的文档流进行排列。