我们在进行定位后经常会用到top，bottom，left，right这四个偏移属性，但是它的使用往往不得心应手，经常会出现文字出现在错误的位置或者跑到了奇怪的地方，这篇博客就来谈谈这些问题背后的原因-----

• 首先了解包含块的概念

        包含快相当于是一个相对参考系，某元素的包含块一般是包裹着它的块级祖先（多数是父元素）元素或离它最近的定位的祖先元素（除static外）。初始包含块是一个视窗大小的矩形，即HTML的父级document，它是根元素HTML的包含块；而非根元素的包含块内容则详见下文：

1. 如果position值是relative或static，包含块由最近的块级框、表单元格或行内祖先框的内容边界构成
2. 如果position值是absolute，包含块设置为最近的position值不是static的祖先元素(可以是任何类型)，过程如下:

　　[1]如果这个祖先是块级元素，包含块则设置为该元素的内边距边界。即是由边框界定的区域

　　[2]如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界

　　[3]如果没有祖先，元素的包含块定义为初始包含块，即document

　　注意：由于元素可以定位到其包含块的外面。这与浮动元素使用负外边距浮动到其父元素内容区外面很类似。所以这里包含块实际上应该是定位上下文，或者定位父级。

• 接着我们来深入了解position的几个值

1. static：将position设置为static后，元素框仍在文档流中，若为块级元素则会生成一个矩形框，若是行内元素则会建立为行框，仍完好的放在其父元素里面。
2. relative：将position设置为relative后，其原本占用的空间继续保留，所以它带来的偏移相当于  相对原来的位置进行移动（即元素框偏移某个距离。元素仍保持其未定位前的形状）。
3. absolute：将position设置为absolute后，元素从文档流中完全删除，只是相对于它的包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。（且元素定位后生成一个块级框）。
4. fixed：将position设置为fixed后，就类似于是将包含块定为视窗本身的absolute一样，从而达到随着浏览器的滑动仍然纹丝不动的效果。

• 偏移问题

  偏移应用于position（除static外），含有四个属性，分别是top，right，bottom，left，它们可以填写的值有：<length> | <percentage> | auto | inherit，默认值为auto。
•         对于top和bottom，相对于包含块的高度；对于right和left，相对于包含块的宽度（注意：相对包含块--都是从包含块border内测算起，也就是padding外侧）如下例：

  css.box{position: relative;height: 300px;width:300px;background-color: #BFC;border: 5px double red;margin: 40px;padding: 60px;}.sonbox{position: absolute;height:60px;width: 60px;background-color: darkgoldenrod;left:auto; left:0px;}
  html：
  <div class="box">123<div class="sonbox">456</div></div>left:auto; left:0px;}
  html：
  <div class="box">123<div class="sonbox">456</div></div>

• 样式如下，如果把红色部分注释掉，就是左下的样式，如果把蓝色的部分注释掉，则变成右边的样式：由此便可以看出相对于包含块的高度和宽度，都是从包含块border内测（也就是padding外侧）而言的。

  

  　　top，right，bottom，left这些属性描述了距离包含块最近边的偏移。

• top 描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上。

• left 描述了定位元素的左外边距边界在其包含块左边界向右(正值)或向左(负值)有多远。如果是正值，会把定位元素的外边距边界向包含块左边界右移，而负值则将其向包含块左边界左移。所以，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。

  　　PS：偏移定位元素的外边距边界时，带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动                                                                                                                                                                　　[注意]：定位元素的边界是指定位元素margin外侧的边界；包含块的包含区域是指包含块的border内侧的padding+content区域

• 元素绝对定位时，会从文档流中完全删除。然后相对于其包含块定位，其边界根据偏移属性(top、left等)放置