CSS样式中的postion元素,它有四个不同的属性,即static | absolute | fixed | relative。
static :默认值。无特殊定位,对象遵循HTML定位规则
absolute :绝对的。将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 固定的。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
其中的 absolute和fixed很多人始终搞不明白区别到底多细微,其实,在IE里面的效果确实没什么区别,但在FF等非IE内核的浏览器中的效果就很不一样了。
以下代码可以运行自己体验
body{color:#fff;}
#html{ position:relative;width:778px; height:1000px; border:1px solid #0000FF;}
#fixed,#absolute{width:200px; height:200px; background:#FF0000;}
#fixed{position:fixed; top:50px; left:50px;}
#absolute{position:absolute; top:50px; left:450px;}
我会随屏幕滚动
我在屏幕的位置不会改变
原文参考自站长网:http://www.software8.co/wzjs/cssdiv/1095.html