在css布局中position的使用非常广泛。在一些面试题目中也会常见到position的问题。所以在这篇博客里面整理一下position属性的使用，在以后的深入学习中还会在补充的。
1.position有哪些属性？
static：所以元素的默认定位是position：static，这意味着元素没有被定位，元素出现在正常流中。
relative：生成相对定位的元素，相对于其正常位置定位，还占有原来的位置，元素通过top,right,left,bottom属性进行规定。
absolute：生成绝对定位的元素，相对于第一个position不为static的父级元素进行定位，脱离文本流。元素通过top,right,left,bottom属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，脱离文本流。元素通过top,right,left,bottom属性进行规定。（IE6不支持）
inherit：规定应该从父元素继承position属性的值。
2.position 与containing block的关系。
（1）containing block详解。
定义：
The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
一个元素的盒模型的定位、尺寸常常会依据某个矩形(box)来计算，这个矩形就叫做这个元素的包含块（containing block）。
看例子来吧。
<div class="bg"> <table> <td>hello world</td> </table> </div>
div是table的包含块。table是td的包含块。不是绝对的。
（2）position与containing block
在网上找了这张图
- 如果该元素的position为 relative或者 static，它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的 内容框创建。元素如果未声明 ‘position’ 特性，那么就会采用 ‘position’ 的默认值 “static”
<table id="table1"> <tr> <td id="td1"> <div id="div1" style="padding:20px;border:1px solid red;"> <span> <strong id=”greed” style="position:relative;">greed is</strong> fsdfd</span> </div> </td> </tr> </table>
strong元素的position为relative，它的包含块由div1创建。span 元素中包含的文本在 div1 中的位置可以看出，div1 创建的包含块的区域是它的内容边界，也就是内边界。
- position: absolute元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。
- 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 ‘direction’ 特性
- 其他情况，包含块的区域取决于其祖先元素的内边距边界。
- position：fixed元素的包含块就是当前可视窗口。