CSS 属性篇(一)：relative与absolute

首先基本了解下position的各个属性值：

1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明）

2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

3、absolute：生成绝对定位的元素，相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

*static属性值和fixed属性都非常的容易理解，我们主要对relative属性值和absolute属性值进行说明。

二、relative

1、定位为relative的元素，虽然可以脱离正常的文档流进行移动，但是其本身在文档流中占据的位置仍然保留。如下图所示：

relative元素进行移动是相对于其本身原来位置进行移动，并且当它移动之后，它仍然占据着原来位置的空间。

三、absolute

定位为absolute的元素，也是脱离正常的文档流，并且其本身在文档流中占据的位置不再保留。如下图所示：

其中黄色背景为absolute的元素，蓝色背景被普通元素，红色背景为二者的父元素（父元素被定义为relative）。

1、absolute元素的父元素并没有设置position属性，而其祖父元素设置了position属性，absolute元素则相对祖父元素进行移动。

2、absolute元素的父元素并设置position:static属性，而其祖父元素设置了position:relative属性，absolute元素则相对祖父元素进行移动。

3、absolute元素的父元素并设置position:relative属性，祖父元素也设置了position:relative属性，absolute元素则相对父元素进行移动。

4、absolute元素的父元素和祖父元素都没有设置position属性，absolute元素则相对浏览器显示窗体元素(注意：不是html元素)进行移动。

5、如下图所示，在没有设置移动属性(left,right,top,bottom)时，absolute元素处于正常布局中所处的位置，只是属于“浮在空中”的状态，不占据文档流空间。

四、注意

对于上文中，absolute元素如果其父层全部都未定义除static之外的position属性，那么它将相对于浏览器显示窗体元素进行移动而非html标签元素有异议的，我们可以试试一下的代码一试便知。

body,html {
	margin-top:50px;
	height:300px;
}
div {
	width:200px;
	height:200px;
	background:red;
	position:absolute;
	top:20px;
}
复制代码

1、如果div元素距离顶部只有20px，则div是相对浏览器显示窗口移动。

2、如果div元素距离顶部为70px（html的margin-top:50px + top:20px），则div是相对html元素移动。

3、如果div元素距离顶部为120px（html的margin-top:50px + body的margin-top:50px + top:20px），则div是相对body元素移动。

.