关于定位、浮动、z-index 和 offsetParent 的一些概念

一、关于 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.