CSS普通属性篇(一)：relative与absolute

目录：

• position的属性值
• relative
• absolute

一、position的属性值

首先基本了解下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）。
如图所示，absolute元素进行移动是相对于离它最近的定义了position属性并且属性值不为static的父层元素进行移动（这个父层元素可以不是其直接父层）。如果其父层全部都未定义除static之外的position属性，那么它将相对于html标签元素进行移动。

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元素处于正常布局中所处的位置，只是属于“浮在空中”的状态，不占据文档流空间。