css中position与z-index

position属性

在css中，position属性用来控制元素的位置信息，其取值共有4种，即static、relative、absolute、fixed。

若没有指定position属性，则默认的position属性值为static，则所有poition属性值为static的对象将按照你所编写html标签的顺序依次呈现。

该属性值仍然保持对象所在文档流的位置，即它与static所呈现的次序相同，与static属性不同的是，它可以通过top，left，right，bottom属性设定自己的新显示位置，这四个属性值是相对于该对象原来所在的位置。

与relative定位不同的是，该属性值会将当前对象脱出文档流，后面的对象占有该对象原来所在的位置；与relative定位相似的是，他可以通过top，left，right，bottom属性重新设定自己的新位置，但该属性的取值不是相对于其最近的一个position值不为static的祖先元素的位置。

固定定位与绝对定位很相似，它同样会使得当前对象脱出文档流，也可以通过top，left，right，bottom属性重设自己的新位置，但是该属性的取值是相对于浏览器窗口，就如"fixed"的含义一样，是钉在窗口中的某一处，其位置固定，不会随着滚动条的拖动而发生改变。

如果说一个平面是由x轴和y轴所构成的一个平面，那么一个html页面就可以看成是一个由x轴、y轴和z轴所组成的一个页面，如图所示:

其中z-index所表示的就是该页面中元素在z轴上的高度，如图A元素的z-index值就比B元素的z-index值要大。但如果要体现z-index的效果也是有条件的，就是该元素的position值不为static(即为absolute、relative或fixed)。