CSS中的position 和z-index

 

属性position，指定元素的定位方式，讲解三个值：static,relative,absolute;

定位方式选定后，就通过如下四个偏移属性来指定它所定位到的位置：top,left,rigth,bottom;
所需具备的认识：默认情况下，如果不指定定位方式，系统将默认为static值；文档流：就是HTML标签集；

对于static：可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有
取值为static的对象都按照你所编写的html标签的顺序依次呈现，我们可以认为这就是一个默认的文档流：所有标签的position都
采用默认值：static，所形成的文档流。

对于absolute这种绝对定位方式，指定此属性值的元素的四个偏移属性是相对于窗口的，而且这个元素也将从默认的文档流中脱离
出来，与默认的文档流形成一种并列关系（可以视它为用户自定义的文档流），它在默认文档流中的位置也可以被后面的元素占用
，当然，此元素也可能会覆盖前面某些元素；


对于relative:这种相对定位，指定此属性值的元素还保留在默认的文档流中，也就是说，它同样占有在默认文档流中的固定位置，
后面的对象不会侵占或覆盖它，而此元素真实出现的位置将会相对于其在默认文档流中的位置发生偏移，偏移量将根据四个偏移属
性指定的值而定；

属性z-index（Z轴）：指定元素的重叠次序，也以认为是自定义文档流间以及与默认文档流间的重叠关系；大值元素覆盖小值元素；

本属性生效条件是：元素要是飘动的：正确的指定position属性，将四大偏移属性的值指定得合理让元素在布局上有交叉有重叠！

 

  （注：加下划线的语句纯属个人见解，自己的一种理解方式，如有不当，请多见谅）