CSS中的position属性

w3school对position的定义是：

position属性规定元素的定位类型。

由此可知，元素是可以被定位的。主要通过设定top、bottom、left、right（定位的上下左右距离）和z-index（z-index决定两个叠在一起的元素的上下层关系）来实现，而定位即设定的上下左右距离是相对父元素还是浏览器还是别的什么来说的则要由position的值来决定。

元素的定位是包括margin在内的盒模型来计算的。

基于盒模型的定位

position的值可以设成：

1、static（默认）

2、relative

3、fixed

4、absolute

5、inherit

static

position如果没被特意设定值，则为默认值static，这种情况下，top、bottom、left、right和z-index会被忽略，就是表示我不定位的意思，你设定了这些值我也不定位。

relative

当position的值设定为relative的时候，定位是相对该元素原本应该在的位置来定位的。

举个例子，两个元素A和B在页面上的显示原来是这样的：

position为static时的A和B

设定两元素的position为relative并且A和B的left都设为50px，页面变成：

relative：A和B定位left50px后

两个元素都相对自己本来在的位置右移50px。

将A的left改成100px，B保持不变，页面变成：

relative：A定位left100px、B定位left50px后

A从原来的位置右移了100px，B从原来的位置右移了50px，定位时不关心其它的元素的定位。

当两个元素叠在一起的时候，就要看z-index了，z-index值大的会在上层，可以“盖”住下层元素，当没有设定z-index的时候，一般html中写在前面的元素会处于上层。

fixed

fixed的定位是相对于可视窗口的定位，常见的右下角广告窗就是用的这个。css如下：

```

.BRCorner {

    position: fixed;

    right: 0;

    bottom: 0;

}

```

这个广告窗就固定在可视窗口的右下角了，无论页面怎么滚动都不移动。

absolute

absolute与fixed有点类似，只是fixed相对的参照物是固定的，而absolute的参照物是不固定的，absolute是相对于最近的一个position不为static祖先元素来定位的，如果没有这样的祖先元素，就是相对body定位的，这个时候是会随着页面的滚动而移动的。absolute相对body定位到为right为0、bottom为0：

absolute:相对body右下角定位滚动前

页面向下滚动后：

absolute:相对body右下角定位滚动后

absolute元素的父元素如果是fixed定位的，则该元素会和它的父元素一起随着滚动条滚动而不动的，此时它也成了相对视窗固定的了。

inherit

和其它的inherit一样，就是和父元素的position值一样。