CSS中的偏移问题

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

• 首先了解包含块的概念

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

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

 

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

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

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

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