CSS魔法堂：Position定位详解

时间：2022-12-02 19:20:32

一、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的padding外边框。

[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;

}

二、 何谓文档流　　　　　　　　　　　　　　　　　　　　　　　　       

将窗体自上而下分成一行行，并在每一行中按从左到右的顺序排放元素，即为文档流。
  有三种情况将使得元素脱离文档流，分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。

三、何谓CSS定位　　　　　　　　　　　　　　　　　　　　　　　　　 

CSS定位，就是元素的position不为static。而该元素将成为其亲子元素的offsetParent，也有机会成为其孙元素的offsetParent。

四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

CSS定位貌似简单，但又容易忽视细节部分，本文尽量记录研究所得，希望大家一起来将其充实。

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^肥仔John

五、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html

相关文章