CSS定位

定位创用于布局，利用定位可以将元素精确摆放在任何位置。定位有四个关键字可选，分别是static、relative、absolute和fixed。static是所有元素的默认值，存在于正常流中，不能使用偏移属性（top、bottom、left和right）.
相对定位（relative）：与静态定位（static）一样，不会脱离正常流，也不会改变元素盒类型，行内元素不会变成块级元素。相对定位会根据原先的位置偏移，并且原先所占用的空间还会保留。
绝对定位（absolute）：会脱离正常流，并且会将元素变成块级元素。元素在被设为绝对定位后，其原先所占的空间被删除，并且它会相对包含块偏移，它的包含块就是离它最近的position属性不为static的祖先元素的内容区域。
固定定位（fixed）：除了IE6和IE7，其他浏览器都支持固定定位。它的变现类似于绝对定位，但有一点不同，就是包含块的定义，固定定位的包含块是当前视口。
CSS属性z-index用于改变元素的层叠顺序，属性值是一个无单位的数字（包含正数和负数）或auto（auto相当于0）。当元素处在相同的层叠上下文中时，z-index属性的值越大越不容易被覆盖。
浮动和定位一起使用会怎样？
给固定定位或绝对定位的元素设置浮动（float）的时候，元素的浮动并不会生效。
如果元素先绝对定位，然后浮动，或者是先浮动再绝对定位，浮动是无效的，会按照绝对定位的位置。
如果元素先相对定位，然后浮动，或者是先浮动再相对定位，最后的位置是相对浮动后的位置，相对定位。
绝对定位于浮动的区别？
绝对定位和浮动都会脱离文档流，改变元素的盒类型，将元素变为块级元素，同时都能创建BFC。两者的不同包括对包含块的定义、对兄弟元素的影响、可摆放的位置以及能否设置z-index的值。

不同点	绝对定位	浮动
包含块	离它最近的position属性不为static 的祖先元素的内容区域	离它最近的块级祖先元素的内容区域
兄弟元素的影响	原先所占的空间会被删除，不会影响兄弟元素	影响兄弟元素的位置和样式
摆放位置	可摆放在任意位置	不能超出包含块的内容区域并且向上浮动也会受限制
z-index	可设置任意的整数或auto	无法设置z-index属性，默认值为0