一、关于 postion: relative: 1) position: relative 不会使元素脱离文档流,元素保留原先的位置并根据这个位置进行定位; 2) position: relative 不会隐式改变 display 的类型; 二、关于 position: absolute: 1) position: absolute; 会使元素脱离文档流,元素不保留原先的位置; 2) position: absolute; 根据最近的设置了 position:relative、position:absolute、position:fixed 的第一个祖先元素定位,如果没有则相对于 body 定位; 3) position: absolute; 会让元素的 display 变为 inline-block(即使显式设置了其他的值也不会起作用); 4) 同时设置了 position: absolute 和 float,float 会失效 三、关于 position: fixed : 1) position:fixed 会脱离文档流,并且不保留原先的位置; 2) position:fixed 只会根据 body 来定位; 3) 同时设置 position:fixed 和 float, float 会失效; 4) position:fixed 会让元素的 display 变为 inline-block(即使显式设置了其他的值也不会起作用); 四、关于 float: 1) float 会脱离文档流,并且不保留原先的位置; 2) float 会让元素的 display 变为 inline-block(即使显式设置了其他的值也不会起作用); 3) 同时设置 float 和 position: absolute; float 会失效; 4) 同时设置 float 和 position: relative; 元素会先根据 float 来浮动,之后以这个浮动之后的位置定位; 五、关于 z-index 1) IE6、7 z-index 的默认值为 0,其他浏览器 z-index 的默认值为 auto; 2) position: relative、position: absolute、position: fixed、float 都会激发 z-index 属性,且默认值为0; 3) 比较先从同级元素开始: a. 如果同级元素都激发了 z-index 属性,那么值高的覆盖值低的,子元素跟随父元素; b. 如果同级元素有的没有激发 z-index 属性,那么先比较激发了 z-index 的元素,值高的覆盖值低的;然后查看没有激发 z-index 属性的父元素的子元素,如果子元素激发了 z-index,则和父元素的同级元素中激发了 z-index 属性的元素比较,值高的覆盖值低的。 六、关于 offsetParent 父元素为 position: relative、position: absolute、position: fixed 时: 1) 子元素为 position: absolute, 子元素的 offsetParent 对象为父元素 2) 子元素为 position: relative, 子元素的 offsetParent 对象为父元素 3) 子元素为 position: fixed, 子元素的 offsetParent 对象为 null 4) 子元素为 float: left, 子元素的 offsetParent 对象为父元素 5) 子元素无定位样式时,子元素的 offsetParent 对象为父元素 父元素为 body 或 float 时: 1) 子元素为 position: absolute, 子元素的 offsetParent 对象为 body 2) 子元素为 position: relative, 子元素的 offsetParent 对象为 body 3) 子元素为 position: fixed, 子元素的 offsetParent 对象为 null 4) 子元素为 float: left, 子元素的 offsetParent 对象为 body 5) 子元素无定位样式时,子元素的 offsetParent 对象为 body 总结:除了 fixed 定位的元素的offsetParent 永远为 null 外,其他的元素的 offsetParent 都是距离子元 素最近的有 position:absolute 或 position:relative 或 position:fixed 定位的第一个祖先元素,如 果没有的话,offsetParent 就为 body.