CSS定位

1.定位的定义

CSS中定位用position:static|relative|absolute|fixed来实现

    static:1.正常流显示；2.不能通过z-index进行层叠分级；3.可设置width,height；4.设置top,right,bottom,left无效

    relative:1.不脱离文档流，参考自身的静态位置，通过top,right,bottom,left进行定位；2.可通过z-index进行层叠分级；3.由于偏移可能会导致宽度、高度错位；建议设置偏移量后，重新设置元素的width,height属性；4.由于元素偏移，会导致后面的内容被覆盖，所以要想正常显示后面的内容，需要将后面内容作为一个层，然后设置这个层的margin-top:上方偏移元素的top值。

    absolute:1.脱离文档流，通过top,right,bottom,left定位，它依赖其最近的父级元素定位，当父级position为static时，absolute元素将以body坐标原点进行定位；2.可通过z-index进行层叠分级。

    fixed：1.固定定位，其所固定的对象是可视窗口，而并非是body或是父级元素；2.可通过z-index进行层叠分级。

    z-index：auto | number；auto 遵从其父对象的定位； number为整数值，可正、负，当然值越大，层元素越靠上。

2.定位的原理

    2.1可以位移的元素（相对定位）

        在文本流中，任何一个元素都被文本流限制了自身的位置，但通过CSS可以改变这些元素的位置。我们通过float来让元素浮动；通过margin来让元素产生位置移动，但margin并非真实的位移，因为那只是位移的障眼法，而真正意义上的位移是通过top,right,bottom,left针对一个相对定位的元素所产生的。

（图1）

我们看到图1是一个宽度为200px，高度50px，margin:25px；border:25px solid #333; padding:25px;相对定位的元素，并且位移距上50px，距左50px。而下方是一个默认定位的黑色区块，我们看到这个处在文本流的区块被上面的相对定位元素挡住了一部分，这说明：当元素被设置成相对定位或绝对定位后，将自动产生层叠，他们层叠级别自然高于文本流，除非设置z-index值为负值，但在Firefox浏览器中z-index为负值时将不会显示。我们发现当相对定位元素位移后，表现内容已经脱离了文本流，只是在文本流中还为原来的相对定位留下了总宽与总高。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还有此相对定位的老窝。特别注意：1.实际应用中如果相对定位的位移数值过大，那么原有区域就会形成一块空白；2.定位元素的坐标点是在margin值的左上边綠点，即B的位置点，那么所有的位移计算将以这个点为基础进行元素的推动，当TRBL为正值时位移方向是内聚的，当TRBL为负值时，位移的方向是外放的。

可以在任意一个位置的元素（绝对定位）

 相对定位只可以在文本流中进行位置的上、下、左、右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地（好比一个打工的人到了外地，但是老家依然有一个专属于他的位置，这个位置不随他的移动而改变），但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位，绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属的空位（好比一个工厂里的职位，如果有一个工人走了，自然会要有别的工人来填充这个位置）而移动出去的部分自然也就成为自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置，在父层position属性为默认时TRBL的坐标原点以body的坐标原点为起始。

（图2）

上图可知：文本流中的内容会顶替绝对定位元素的位置，而绝对元素自然层叠于文本流上，而在单一的绝对定位中，定位元素将跑到网页的左上角，因为那里是他们的坐标原点。

被关联的绝对定位（也就是说子级自动与父级保持关联）

    这是种特别的形式，父级设置为绝对或相对定位，子级设置为绝对定位，那么子级就会以父级为坐标起始点。虽然如此，但这个坐标原点即并不是父级的坐标原点，这是一个很奇怪的坐标位置。

总在视线里的元素（固定定位）

    position:fixed，这个以前曾经不被支持，它的含义就是：固定定位，这个定位与绝对定位很像，惟一不同的是绝对定位是被固定在网页中的某一个位置，而固定定们则是固定在浏览器的视框位置。虽然原来的浏览器并不支持这个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性，并且通过CSS HACK来让IE6都 可以实现这样的效果 （目前无法使IE5.x）实现这种效果。

 

以上为本人参考 http://www.blueidea.com/tech/web/2007/4577.asp

 

得出的总结，希望能对大家有用。如需要交流，请加QQ：75013567