CSS之position

         之前已经讲了盒子模型，以及行元素块元素等概念，现在对于布局来说差的就是定位，所以本文将介绍position的一些属性特点，从而在为布局的时候能够提供帮助。

1.relative

        relative是以网页的左上角为原点，然后以定义的top、left、right、bottom来确定两个维度上的正方向，所以下面通过例子来讲解：

查看效果：

接下来将位置属性改一下：

得到效果图：

        根据以上的规律可以知道，以左上角为原点，top表示从上往下为正轴，bottom表示从下往上是正轴，right表示从右往左是正轴，left表示从左往右是正轴。

2.absolute

        absolute与relative最大的区别就是原点会发生改变，而top、bottom、left和right的正轴方向都是在网页可视范围内的，比如top是从网页上端往下、bottom是从网页下端往上、left是从网页左端往右、right是从网页右端往左。因此如果使用right和bottom那么右下角就是原点，其它同理。以下用实例说明：

效果图如下：

        这里使用了bottom和right，所以是以左下角为原点的，往上和往左是正轴方向。但是absolute有个特点就是如果有下拉滚动条的，一旦拖动下拉滚动条，块也会进行滚动，它的绝对体现在相对于初始那个点它是绝对的，一旦拖动滚动条，那个点发生了改变，那么块也随之改变。

3.fixed

        fixed是固定的意思，对于四个方向的坐标以及正负轴来说，与absolute是一样的，区别在于它位置是固定的，甚至下拉滚动条也不能改变它的位置。以下通过示例来区分fixed和absolute的区别。

效果图如下：

        以上红色块是代表fixed的，绿色块是代表absolute的，接下来拖动下拉滚动条，变化如下：

        可以看出红色块并未移动，而绿色块发生了移动，是因为它原本最底下的参考点往上移动了，所以它也跟着往上移动。

4.inherit

        inherit就是继承的意思，如果它的配置是以父类为基准的，就算子类重新配置，父类的定位配置也会将其覆盖。

效果如下：

5.z-index

        常规来说后面的块会覆盖前面的块，但是z-index可以改变层级的优先级，z-index值大的会覆盖z-index小的层级。实例如下：

 
  
  
 
 


z-index的用法
 

效果如下：

        可以看出后面的层会覆盖前面的层，那么接下来通过改变z-index的值来改变层的顺序。

 
  
  
 
 


z-index的用法
 

效果如下：

        可以看出，文字的z-index比较小会被覆盖，默认的z-index是0.