CSS 使用 position 选项进行定位, 有 5 个可选值, static,relative,absolute,fixed, inherit, 其中 inherit 是继承父元素的定位属性, 因此在这里我们介绍前四个属性值.
1, 相对定位
相对定位是指相对于文档流的元素进行定位, 与绝对定位的和脱离文档流的 absolute,float 无关.
(1)static(默认值)
如果使用默认值, 在 CSS 为元素定义的 top,left,right,bottom,z-index 都不会生效
(2)relative
relative 的表现和默认值一样, 只不过通过偏移量个 z-index 来控制相对与正常位置进行便宜
2, 绝对定位
(1)absolute
absolute 是相对上一个不为 static 的父元素进行绝对定位. 如果不指定父元素的 postion,absolute 将相对与整个文档进行绝对定位
(2)fixed
生成绝对定位的元素, 相对与浏览器窗口进行定位, 也就是说, 无论网页如何滚动, 该元素始终停留在屏幕的某个位置.
来源: http://www.jianshu.com/p/d6064c55cfb0