css中的定位

上一篇博客，我大概介绍了下浮动的使用及行为。其实在整个文档布局中，定位也对我们整个的页面排版有非常好的帮助，当然前提是使用得当。

一、定位分类：

a、静态定位  position:static;    ：元素按照正常的文档流顺序出现，位置等不产生任何改变(文档流的默认属性)。

b、相对定位  position:relative;：元素盒会产生移动，并且它在文档流中的原始空间会保留下来。

c、绝对定位  position:absolute;：元素从文档流中脱离出来，相对于容器块产生移动，原始空间不会被保留，周边元素将会占据它原来的空间。

d、固定定位  position:fixed;：元素从文档流中脱离出来，但是他们是相对于浏览器（视口）产生的位置的改变。目前有些浏览器不支持该种定位方式。

注：对于被设置为静态或相对定位的非根元素，容器块是它最近的块级元素、表格单元的内容区的边缘。

　　对绝对定位的非根元素，容器块是它最近的不是静态定位的祖先元素（即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;）

二、position  的属性：

当一个元素的position 定位类型一旦被确定后，它有四个偏移属性：top  right  bottom left  (四个属性的值可以设置为：长度、百分比或者auto;)

a、相对定位：position：relative;

(top right bottom left )相对于它们在文档流中的初使位置进行定位，没有设置偏移属性的，默认值设为auto;

在文档流中所占据的原始空间被保留；

可能会覆盖其它元素；

当设置为相对定位时，使层位置产生偏移，但并不影响文本流中接下来其它层的位置；

当设置为相对定位时，层的层叠级别高于文本流的级别（即优先顺序是越靠近越产生影响）；

当两个元素设置为相对定位时，同等级别下会按照文本流的顺序层叠显示。

.a {position:relative;top:100px;left:100px;}

b、绝对定位：position:absolute;

(top right bottom left )相对于容器块边缘（包括margin值）进行定位，没有设置偏移属性的，默认值设为auto;

在文档流中占据的原始空间不被保留；

当设置为绝对定位时，该层将从文档流中脱离，以该层所在的容器块的坐标原点为参考进行偏移，不会对其它元素产生任何影响；

注意：当容器块没有设置position属性或者position属性为static时候，将以body或html的坐标原点为参考。

.b {position:absolute;top:100px;left:100px;}

注意：建议文档流中慎用position属性，尽量使用float属性来对文档流相关元素进行定位！！！