css position了解

   不是转载的，自己写的。学习要踏实，一直困扰的那个css position问题，搞不清楚几个属性的区别。今天明白了，怕忘掉了，写下来记着。

   position 属性有四个值 static, relative, absolute, fixed; 默认的值是static，没有什么特殊效果。

   从relative开始说吧。 relative值表示相对的意思，表示元素是相于自己本身的偏移，直接上图看效果吧

 

图1 css样式为 width:100px; height:100px; padding:10px 10px; border:1px solid #0C6;很简单的一个简单测试没有什么其他

图2 样式为position:relative; top:40px; left:30px; width:100px; height:100px; padding:10px 10px; border:1px solid #0C6;

图1 和图2， 图1是正常显示，没有定义position属性， 图2是加了相当定位，可以看到左边和上面的间距。

 总之就是，relative是对元素本身的相对，跟其他元素没有关系。

  接着再看绝对定位，还是上图

图3 样式为position:absolute; top:40px; left:30px; width:100px; height:100px; padding:10px 10px; border:1px solid #0C6;

图4，样式没变，多加了些文字

 绝对定外可以从图中看出，元素定义为绝对定位的话，就不会受其他元素的影响，这里要注意的是，绝对定位的偏移距离是相对于元素本身的第一个父元素，如果没有父元素，则就是相对于bady的偏移了。

最后说下fixed，fixed其实是absolute的特殊例子，absolute的偏移是相对于父元素，而fixed则是相对于窗口的偏移，也不能说是窗口，就是浏览器用来显示网页的可视区域，始终保持与可视区域的偏移，不受页面的滚动影响。

   这是第一次自己写的博客，本文也是参考网上其他同行的博客文章，然后用自己的话说的一些理解，留着自己看吧。