接触html跟css也有段时间了，但是每次要用div+css布局时，心里还是有点虚，尤其是对于position这个属性的运用，之前都是囫囵吞枣。大致了解个概念，对他们也不够重视，这让我在用到这个属性布局时吃了不少亏，都说在“哪里跌倒就在哪里爬起来!”，对于这个自己埋下的坑，最近终于可以静下心来好好把这个坑填上了，同时把自己学到的跟大家分享下，希望能给初学者一点帮助，不要像我之前一样老是掉坑里~接下来咱就简单说说position的那些事儿。。。

position有四种属性，分别是static，fixed，relative，absolute;

前面两种，相对来说理解起来也比较简单，

position：static — —静态定位，是position的默认定位方式，一般不给元素设置position属性或者设置为静态时，元素都会按照正常的文档流进行排列。

position：fixed — —固定定位，是absolute的特殊，总是相对于body这个元素进行定位。设置top，bottom，left，right等会按照浏览器窗口进行移动。

哈哈哈，说完这两个简单的，咱们该说说重头戏：relative跟absolute了，

position：relative — —相对定位，既然是相对定位，那总该找个东西来相对吧?是滴，没猜错，设置了position：relative的元素会相对自身原来的位置进行(top，right，bottom，或者left)移动。而且重点是position：relative这个属性没有脱离标准文档流，因此，元素本身所占的位置会被保留。

position：absolute — —绝对定位，所谓绝对定位，无非也是要找个“相对”的物体来“绝对”，是不是觉得有点别扭勒?借个比方，换个说法，就是这个小鬼(element)的定位可以是他的老爸，他的爷爷，他的太公....(祖先要素)中而且第一个是是有钱的(position:absolute)或者是当官的(position:relative)，就是不能是个程序猿(position:static 或者没有设position)的。而且值得注意的是position:absolute这个属性是脱离文档流的，所以重新定位后元素是不会占着原来的位置的。这个就不贴代码了，大家可以自己动手敲敲键盘，就会明白了。