先看一下定义
position:relative|absolute|static|fixed
◆static没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
◆relative不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级。
◆absolute脱离文档流,通过top,bottom,left,right定位。选取其最近的父级定位元素,当父级position为static时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
◆fixed固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
一般来说
relative就是相对定位 他位置是参照自身原来的位置定位的,定义中说"不脱离文档流"就是说文档会预留原来的位置.
注意的是absolute绝对对定位:
他参照的定位分两个情况:
1.父对像没有设置position或position为static;它参照的就是body坐标原点.
2.其它时候时候它参照的是父对像的左上角坐标.
前面两个链接说的挺明白的,一个是相对整个页面的定位,一个是相对于原来“应该”所在位置进行定位
也说是说绝对定位是距离页面左上角的距离,相对定位是比如不进行定位本来应该在的位置,相对定位后是从不定位的位置开始算起
http://www.w3school.com.cn/css/css_positioning_absolute.asp
绝对定位
http://www.w3school.com.cn/css/css_positioning_relative.asp
相对定位