来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 一、Position各属性值详解 1 static ：默认值，元素将按照正常文档流规则排列。 2 relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、r...
|
一、Position各属性值详解
1. static ：默认值，元素将按照正常文档流规则排列。
2. relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。
注意点：[a]. 元素原来位置将保留，不被其他元素所占据;
[b]. 当使用left，top改变元素位置时，元素将以原来位置的border外边框的左上角作为参考点 ;
[c]. 当使用right、top时改变元素位置时，元素将以原来位置的border外边框的右上角作为参考点 ;
[d]. 当使用left、bottom时改变元素位置时，元素将以原来位置的border外边框的左下角作为参考点 ;
[e]. 当使用right、bottom时改变元素位置时，元素将以原来位置的border外边框的右下角作为参考点 ;
3. absolute ：绝对定位，元素脱离正常文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置
注意点：[a]. 元素将不再占据原有位置;
此处定义 变量X，以下内容将使用X代替参考点
条件：当元素的offsetParent为body而且body没有进行CSS定位，则X=页面;
其他情况，X=offsetParent的border外边框。
[b]. 当使用left，top改变元素位置时，元素将以X的左上角或作为参考点 ;
[c]. 当使用right、top时改变元素位置时，元素将以X的右上角作为参考点 ;
[d]. 当使用left、bottom时改变元素位置时，元素将以X的左下角作为参考点 ;
[e]. 当使用right、bottom时改变元素位置时，元素将以X的右下角作为参考点 ;
4. fixed ：固定定位，元素脱离正常文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置
注意点：[a]. 元素将不再占据原有位置;
[b]. 以浏览器的可视区域的四角作为参考点。
[c]. IE5.5~6不支持该属性值。
可使用js来修复，对于拖动滚动条元素闪铄的bug需要通过下列的CSS来处理。
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
或
body{
_background-image:url(about:blank);
_background-attachment:fixed;
}
二、 何谓脱离文档流
脱离文档流的意思，就是不再占据文档位置。
三、何谓CSS定位
CSS定位，就是元素的position不为static。而该元素将成为其亲子元素的offsetParent，也有机会成为其孙元素的offsetParent。
四、总结
CSS定位貌似简单，但又容易忽视细节部分，本文尽量记录研究所得，希望大家一起来将其充实。
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^肥仔John
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
