position属性详解

 1、static
    这是属性是positon的默认值，如果一个div我们没有给他任何的position,那么他不会脱离文档流，他的属性就是static,不理解这个我就没的说了...

2、absolute

 <mce:style type="text/css"><!-- #box1{border:#000 solid 1px; width:150px; height:100px; } #box2{ position:absolute;border:#000 solid 1px; } #box3{border:#000 solid 1px; width:150px; height:100px; } --></mce:style><style type="text/css" mce_bogus="1"> #box1{border:#000 solid 1px; width:150px; height:100px; } #box2{ position:absolute;border:#000 solid 1px; } #box3{border:#000 solid 1px; width:150px; height:100px; } </style> <div id="box1"></div> <div id="box2">绝对定位</div> <div id="box3"></div>

从上图可以看出 absolute是脱离了文档流的，那绝对定位是如何进行定位的呢，这时候要注意了top和left两个属性。看例子：

view source

print ?

1. <style type="text/css">

2.     body{ margin:0; padding:0}

3.     #box{ background:#00F; width:1002px; height:500px; margin:0 auto}

4.     #abox{ width:150px; height:100px; background:green; position:absolute; left:50px; top:50px}

5. </style>

6. <div id="box">

7.     <div id="abox"><DIV></DIV>

8. </div>

在1024*768的分辨率下运行以上代码，此时发现abox距box的上、左距离都是50px，貌似设计的没有问题，此时我们把分辨率换成宽度大于1024的 此时就发现问题了，如我的是1600*1440，结果就变了

这说明本例中absolute的top和left值的是相对于浏览器边框的，如果我们想让abox距box的上左距离固定为50px的话(也就是说让top和left的值相对于某个div)，那么我们需要在把box的position属性设置为relative。经过我自己的一些实践得出以下结论：
如果一个元素设置为absolute，那么他的top和left相对位置的寻找过程是这样的，首先他会检查他的父框是不是relative，如果是他就按照父框定位，如果不是他会继续寻找他父框的父框是不是relative，如果是就按照他父框的父框定位，如果不是他就去检查他父框的父框的父框是不是relative.....以此类推，如果他的所有祖先都没有relative，他就按照浏览器边框进行定位。
说的简单点，有两个div,分别是diva,divb,如果让diva相对于divb偏移，那么第一步设置diva为absolute,设置偏移量left top。第二步把diva放在divb的内部（儿子 ，孙子，重孙子等等都可以，只要是他的子元素就可以）

3、relative

相对定位，首先要明白相对定位只是相对某个元素的本身而言。这个没有脱离标准流，他按照标准流的方式排版。
比如仅设置了一个元素relative,那么他的位置和static一样，如果又设置了他的left和top，那么它会做一些偏移，偏移是相对于他本身而言，比如top:20px;left:30px;此时这个会在原来的位置上 向下移动20px，像右移动30px，要注意的是，这个元素移动之后的占用标准流的位置没有变化，就是说，没移动前他占用的是哪位置就是哪位置，不会因为移动了元素，导致整个文档布局发生改变。

4、fixed

固定位置，脱离了文档流，效果是无论怎么拖动滚动条，它始终固定在屏幕的指定位置，本来是挺好的一个功能，可惜的IE6不支持。

5、inherit

这个同样没什么的说的，inherit就是继承，继承父元素的父元素的 position 值。

总结：不明白的地方多翻翻CSS手册，看明白了之后自己动手写写