css 绝对定位(absolute)跟固定定位(fixed)-HTML教程-爱易网页

日期：2014-05-17　浏览次数：20541 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。