CSS魔法堂:Position定位详解

当前位置 : 首页 > 网页制作 > CSS > CSS魔法堂:Position定位详解

CSS魔法堂:Position定位详解

来源: 作者: 时间:2016-01-23 10: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来处理。
 
*{
     background-image:url(about:blank);
     background-attachment:fixed;
}
 
body{
     _background-image:url(about:blank);
     _background-attachment:fixed;
}
 
 
二、 何谓脱离文档流                           
 
  脱离文档流的意思,就是不再占据文档位置。
 
 
 
三、何谓定位                          
 
  CSS定位,就是元素的position不为static。而该元素将成为其亲子元素的offsetParent,也有机会成为其孙元素的offsetParent。
 
 
 
四、总结                              
 
  CSS定位貌似简单,但又容易忽视细节部分,本文尽量记录研究所得,希望大家一起来将其充实。
 
  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^肥仔John
Tag:
上一篇:css 概述
下一篇:CSS3的背景渐变gradient
网友评论

<