定位
通过使用position属性，可以选择4种不同类型的定位：static，absolute，fixed，relative。默认值即static。主要介绍absolute以及relative值的特性，fixed与absolute类似，只是它的包含块默认为浏览器。
与浮动一样，定位也需要考虑其包含块。
absolute
绝对定位，首先要明确，绝对定位的元素将会从文档流中完全删除，然后元素会根据top、left、right以及bottom相对于其包含块进行定位。由于元素完全从文档流中删除，元素本来在正常文档留中所占的空间会关闭，就好像其从来没有存在过。
并且，与浮动一样，绝对定位后的元素会生成一个块级框，而不论其原来在正常文档流中是块级元素还是行内元素。
可见，为了准确的找到绝对定位元素的正确位置，确定其包含块是关键。我们知道，浮动元素的包含块就是离其最近的块级祖先。但是绝对定位的包含块就不是那么简单了。
包含块
CSS2.1定义了不同类型元素的包含块确定方式：
- 对于“根元素”，其包含块即初始包含块，由用户代理建立，在大多数浏览器中初始包含块就是视窗；
- 对于“非根元素”，若元素的position是static或者relative，那么元素的包含块是离其最近的块级框、表单元格或者行内块祖先框的内容边界构成。这句话中包含很多信息，“最近的”，“块级框”，“表单元格”，“行内块祖先框”，“内容边界”。所以前文所说的浮动元素的包含块，准确的说法应该是如此。
- 对于“非根元素”，若position的值是absolute，其包含块是离其最近的position值不是static的祖先元素（无论是块级元素还是行内元素，无论是relative还是absolute）。但是，若包含块是块级元素，则包含块设置为该元素的内边距界，若包含块是行内元素，则包含块设置为该元素的内容边界。这点要注意！显然，若没有position非static的祖先，则其包含块为初始包含块。
偏移
top、right、bottom、left用于指定定位元素相对于其包含块4条边界的偏移值。显然若值为正值，则会向着内部偏移，若为负值，会向外偏移，即，与浮动设置负的外边距一样，定位元素也可以使用负的偏移使元素定位到其包含块的外面。
显然，利用top、right、bottom、left可以隐式的确定元素的width和height属性，
{
top:0px;
left:0px;
bottom:0px;
right:50%;
}如上述代码即可使元素填满包含块的左半部分。
这里需要注意这些偏移值设为auto时的行为，CSS2.1规范指出，若偏移量设为auto，定位元素的各边会与其静态位置对齐。静态位置即元素未定位之前的位置。
过度限制
很显然，当对元素的各项属性都显式指定时，有可能会过度限制（无法满足所有的属性值）。
一般的，元素的大小和位置取决于其包含块，以及各个属性的值，当然最主要还是取决于包含块。元素的摆放应当复合以下等式：
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含块的width
考虑下面几种情况：
- left，right，width均为auto时，元素应当置于其静态位置处，并且其width会进行恰当收放，保证宽度只能恰好包含其内容
<p>This is <span>test for <em>absolute!</em>Yes,we can.</span></p>p
{
position:relative;
background-color: silver;
}
p em
{
position: absolute;
right: auto;
width:auto;
left: auto;
background-color: red;
}效果如图所示：
绝对定位的em元素被放置在其静态位置处（但是注意，由于绝对定位的元素已经从文档流中删除，所以后面的正常流会填在这里，所以会发送覆盖的现象），width正好容下其内容，而right则是计算的剩下的距离。
2. 一般的，如果只有一个属性设为auto，用户代理会自动计算并修改该属性的值来满足前面的等式。
Z-index
显然，绝对定位可能会遇到多个元素试图放置在同一块区域，谁上谁下，这就是z-index属性来控制的。
z-index的属性值是个十进制的数字（可以为负数），值越大离用户越近。默认为auto，当为元素指定了任意z-index值（非auto），则该元素就会建立自己的局部叠放上下文，auto表示该元素的层次与其父框相同，并且，该元素不会建立新的局部叠放上下文。用户代理可以将auto处理为z-index=0.
注意：z-index的属性值都是相对于自己所在的叠放上下文，如下例子：
<div>
<img src="0.jpg" alt="bigface">
<p>I have a <em>big</em> face!</p>
</div>div
{
position: relative;
background-color: silver;
}
img
{
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
p
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
p em
{
position: absolute;
top:auto;
left: auto;
z-index: 20;
}虽然em元素的z-index值为20，但是他仍然被img覆盖，这是因为em元素的z-index属性是相对于其所在的叠放上下文即p元素而言的，而p元素的z-index值为1，img为2，可以这么理解，em的z-index值为（1，20）。
即：
img：2
p：1
p em：1，20
这样比较容易理解！
相对定位
相对定位比较简单，需要注意的是相对定位是相对于元素的静态位置的偏移，但是元素本来的生成框不会消失：
<p>I have a <em>big</em> face!</p>p
{
background-color: red;
}
p em
{
position: relative;
left: 20px;
}效果如下：
可以发现相对定位后em元素本该出现的位置留出了空白。
固定定位
固定定位与绝对定位相似，position为fixed时，区别在于，固定定位的包含块默认为浏览器视窗。
诸如CSDN网站界面的
这种图标，都是固定定位实现。
