position属性

太久没有复习以前的知识了，现在回头一看，结果都不记得多少了，特别是绝对定位跟相对定位，看着效果图，我完全分辨不出来了，因为它们看着没什么两样，看不出是用（absolute）绝对定位写的，还是用（relative）相对定位写的，但是我知道它们的用法有很大的区别。在盒模型中，有三个属性可以用来控制页面排版。三大属性：position属性，display属性，float属性。

①position 属性控制页面上元素间的位置关系。

②display 属性控制页面元素是否显示或者是堆叠还是并排显示。

③float  属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。

其中position是核心的，position属性是干嘛用的？怎么用？有哪些属性值？

Position一共有四个属性值，分别是static（默认状态）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）

⑴static：页面元素默认的定位。

⑵relative：relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）

⑶absolute：absolute绝对定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

怎么改变？这里就要用到前面我们学到的relative相对定位了。用relative和absolute配合使用就能改变我们的定位点。

⑷fixed：fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

下面，我用个例子来说明侧重说明一下相对定位与绝对定位吧。

首先肯定要定义好每一个盒子的名字啊，这里一共有两个盒子，分别是rela，abs。

接着开始设计样式，把盒子rela设计成一个宽度为200px，高度为200px，背景颜色为紫色的模型，把盒子abs设计成一个宽度为100px，高度为100px，背景颜色为浅蓝色的模型：

赋予一个absolute(绝对定位)，效果如下：

同样设置，把盒子one设计成一个宽度为300px，高度为300px，背景颜色为酒红色的模型：

然后赋予一个relative（相对定位），效果如下图

看完例子，你能否更加了解绝对定位与相对定位的用法和区别？