关于css 中position使用的浅谈

在css中有一种属性position。在W3C上我们可以找到他又一下几种属性：absolute、fixed、relative、static、inherit。但是position的使用却并不是简简单单的将以上的属性值写入css就可以大功告成的，要想使用position，就要考虑这几种属性值在不同父级元素中的效果，以及自身标签中其他属性的值。

下面就具体解释一下这几个属性值的用法，不过首先你要理解“盒模型”，如果不明白，就要自学一下了（不是本文讨论的问题）。笔者也是看了其他博主的博文后，结合自己的理解整理的。所以借鉴了一些他人的思想。

1、static：

即默认的值，如果不对元素设置的话又没有设置为‘继承’，就相当于没做设置，所以很少看到有将position设置为static的情况，但只是少用，而不是不用。

2、relative（相对）：

　　使用这个元素时，要先找到该元素的父元素，还要知道trbl属性（top、right、bottom、left）。所谓相对，就是在父元素内部，设定子元素相对父元素中自己原来的的位置，比如：top：20px；就是距离父元素中自己原来的的位置偏下20像素，一般来说只需要指定横向上的一个和纵向上的一个，即可达到子元素定位的效果。另外，要强调一点，relative定位的子元素是不能重叠的，即他会考虑其他元素而布局的。

设置之后，原来的框还在，但自己已经偏移到原框偏移了。

3、absolute（绝对）：

　　即在父元素中不考虑同级子元素，用trbl属性（top、right、bottom、left）定位，但是有重叠，即在同一个父元素中，几个子元素使用相同的trbl属性（top、right、bottom、left），就会出现在同一个位置。因此会出现遮盖，这时候我们需要z-index设置显示优先级，值为自然数，即数值越大，显示层越靠前，越有可能被用户看到。值得注意的是，在W3C中指出“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”

　　即在使用position：absolute时，应该先看看父元素。我们已经知道，如果static是一个默认值，即使用position：absolute前，先对父元素设置成一个“最近的已经定位的祖先元素”通常将父元素（被参考的先祖元素）设为position：relative。

4、fixed

　　fixed与相似，只不过他的“参考先祖元素”是浏览器，即浏览器直属部队。

5、inherit

　　即继承父元素的position值。