细谈position属性:static、fixed、relative与absolute

 

更新时间：2019-07-24 09:21:38  

　　学习WEB有些时日了，对DOM中的定位概念有些模糊，特地花了一个下午的时间搜资料、整理写下这篇随笔。

　　首先，我们要清楚一个概念：文档流。

　　简单的讲，就是窗体自上而下分成一行一行，并在每行中按照从左到右来布局。

　　而脱离文档流，就是说，将元素从普通的布局排版中拿走。其他盒子在定位的时候，无视这个元素的存在而进行定位。

现在，谈谈position属性的这些值都有怎样的特性。

一、position：static 

　　CSS定位中的默认值。当元素不设定任何position属性时，默认用static进行定位。不定义position属性时，各对象都在原来的位置上保留。

         　

上图忽略 top, bottom, left, right 或者 z-index 声明。

二、positon：fixed

　　我们在刷微博、刷学者网、看QQ空间的时候，可以发现，导航栏一直浮于顶部，任凭滚动条的移动。

我们再打开浏览器的审查元素，可以看到：

三、position：relative

　　relative和absolute一直是困扰初学者的两个定位属性。

　　顾名思义，relative，相对，相对定位；absolute，绝对，绝对定位。

　　w3C文档中对relative的解释是：生成相对定位的元素，相对于其正常位置进行定位。也即元素的“相对”是相对元素原来按照正常流的位置。

　　

　　现在我们给Hellodiv这个元素设置为left：20px；则元素从相对于正常位置向右偏移2px:

     

　　当然，在实际的开发过程中，我们往往会碰到更精确的定位需求。我们要和父节点、要和兄弟节点协作完成。那么要注意：

　　1.top与bottom同时存在的时候。只有top发挥作用，如top=20同时设置bottom=20；bottom是无效的，我们会看到浏览器中，bottom被忽略（中间的删除线）。

　　2.left与right同时存在的时候，只发挥了left的作用。

　　3.如果对中间的对象设置left：20px，则对象的原来的位置保留，而后面的对象则按照原来文档流保持不变。

      

四、position：absolute

　　absolute绝对定位与文档流无关，因此不占空间，因为其相对定位被看做普通定位模型的一部分，因此后面的普通流就将它忽视。

　　

　　那么，绝对元素又如何绝对呢？

　　W3C文档中这样描述：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。也即被定位为absolute的元素，其位置是相对于父节点而言的。

假设父元素包含子元素，则子元素的left属性表示左边框到父元素左边框的像素（当然这个父元素应当是最近的且已经定位的父元素）。

　　

　　如果没有已定位的父元素，OK，元素默认以浏览器窗口为父元素，其中top是距离浏览器窗口顶部的距离，left是距离左侧的距离。

 

最后，值得注意的是，虽然position：absolute定位使对象脱离文件流，当我们在一件F12的时候仍然可以看到脱离文档流的元素存在于dom树中。

 

参考：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.htm

　　　http://www.w3school.com.cn/cssref/pr_class_position.asp