css 绝对定位(absolute)和固定定位(fixed)

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