html 的 position 属性用于定位元素在页面的位置, 它的取值有4种情况, 如下:
static / relative / absolute / fixed , 下面就对这四种情况加以说明,
1. static, 默认情况下 position 的取值都为 static, 也就是说它所定义的位置就是页面文档流定义的该元素的位置, 通俗来讲就是它应该在它应该在的位置上,在这种情况下,该元素就会忽略 top, right, left, bottom 等的声明。
2. relative, 即就是相对位置, 这个相对指的是该元素相对它的position值为static 时所对应的位置, 此时定影left, right 等就有了意义。
3. absolute, 指的是可以定位于相对于其父元素指定的位置, 可以用left, right等来规定。
这里需要考虑两种情况:
第一种,当一个元素position 被设定为 absolute之后,理论上,这个元素的父元素的position应该设置为relative或者absolute,那么此时该元素的位置就会相对于父元素的位置进行定位。
第二种,如果这个元素的父元素的position没有设置, 也就是说为static属性, 那么此时该元素的位置就不会相对其父元素的位置进行定位, 而是参考body元素的位置进行定位。
4. fixed, 即就是固定位置,它指的是相对于浏览器窗口所指定的坐标, 可以使用left, right等来规定, 而且不论浏览器窗口是否滚动拖拽等, 它总是停留在那个地方。
更加详细的说明可以参考: http://www.cnblogs.com/yinc/articles/2017649.html