CSS魔法堂:Position定位详解

简介:

一、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

 

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!


本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/3967350.html,如需转载请自行联系原作者

相关文章
|
4月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
|
2月前
|
前端开发
CSS position 小结
CSS position 小结
14 0
|
2月前
|
前端开发 JavaScript 定位技术
css3浮动定位
css3浮动定位
41 0
|
2月前
|
Web App开发 前端开发 JavaScript
探索CSS中的粘性定位:解锁网页布局的新可能
这篇文章详细解释了CSS中的sticky定位方式,并讲解了它的工作原理。
|
4月前
|
前端开发 测试技术 Python
软件测试/测试开发|Python selenium CSS定位方法详解
软件测试/测试开发|Python selenium CSS定位方法详解
30 0
|
4月前
|
前端开发
今天来总结一下CSS中有哪些定位
今天来总结一下CSS中有哪些定位
|
5月前
|
前端开发 容器
CSS中的定位
CSS中的定位
61 1
|
6月前
|
前端开发
CSS 定位
CSS 定位
24 0
|
6月前
|
前端开发 容器
面试官:介绍一下CSS定位?absolute和relative分别依据什么定位?
面试官:介绍一下CSS定位?absolute和relative分别依据什么定位?
65 0
|
6月前
|
前端开发 容器