CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1. relative:相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。移动元素会导致它覆盖其它框。
最初不为item2设置relative定位时：
下面比较当分别用left、margin为item2设置relative定位时的不同之处：
Document 1111111111111111111111111111222222222222222222244444444
效果：
注释掉left、top，使用margin，效果：
这里有一点要注意的是当将relative定位应用到三个box的时候，
.item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; position: relative; } 
也就是当兄弟元素都是relative定位时，移动某个元素会被其他兄弟挡住。
到这里可以验证当使用top right bottom left 这样属性改变元素的位置的时候，不会影响其他元素的位置。而使用margin 这样的属性改变元素的位置会影响其他元素的位置。
2. absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
Document Box-1Box-2Box-3
如图：
为box-2设置绝对定位：
.item2{ position:absolute;} 可以发现：box-2脱离标准文档流，由于未设置定位数据，它只是从之前的位置“浮起来”，这时它不再默认继承父选择器的100%宽度，故只是挡住了box-3的左边一部分：
为box-2增加定位数据：
.item2{ position:absolute; top:0; right:0; } box-2定位到浏览器（html）右上角，因为其直接父容器body-div没有定位属性：
当为box-2父容器添加relative定位时：
#body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; position: relative;} box-2以其父容器为准右上角对齐：
这里出现了个情况，就是我设置relative的时候一开始设置到#body-div div里面去了：
#body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; position:relative; } 效果如下：box-2没有移动！这是因为box-2的absolute定位是以.item2形式定义的，被#形式的样式定义absolute定位覆盖了。ID选择器权值更大！
3. z-index: z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(Z-index 仅能在定位元素上奏效（例如 position:absolute;）！)
默认值为auto，堆叠次序与父元素相同。