参考链接
http://www.cnblogs.com/chinafine/articles/1765967.html
http://www.ipmtea.net/css/201010/09_335.html
http://www.cnblogs.com/polk6/p/3214847.html
position-fixed 固定定位,能单独使用,脱离文档流
比如html5中导航 ,tab定位,一般相对于body定位
fixed是特殊的absolute,即fixed总是以body为定位对象的
position:absolute 绝对定位,不能单独使用,需要父亲position属性,脱离文档流
需要设置父div的position属性,设定好了之后相当于父div进行定位
给定一个div 取名 sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象parent也设置了position属性,且position的属性值为absolute或者relative
也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是,sub2的位置到哪里去了呢 由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
这里有个注意的地方是sub1脱离了文档流到新的定位地方时,就会显示显示自身大小,这个时候可以加100%来显示
(2)如果sub1不存在一个有着position属性的父对象
那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
position:relative 相对定位,相对应本身自己进行定位,能单独使用,未脱离文档流
比如有两个div 一个div1 一个div2 此时正常排版时候div2紧跟着div1进行排列,此时如果需要div2重叠div1 此时可以用position:relative来进行真对自身进行相对定位
相关属性 top left bottom right
position:static 默认定位,不起作用,一般不设置,未脱离文档流
默认情况下div的属性