相对定位、绝对定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1. relative:相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。移动元素会导致它覆盖其它框。
最初不为item2设置relative定位时：
下面比较当分别用left、margin为item2设置relative定位时的不同之处：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.item1, .item2, .item3{
width:300px;
height:100px;
background-color:#123456;
margin:20px;
}
.item2{
position:relative;
top:40px;
left:40px;/* margin:40px 0 0 40px; */
border: 3px solid yellow;
}
</style>
</head>
<body>
<div>
<div class="item1"></div>
<div class="item2">11111111111111111111111111</div>
<div class="item3">11222222222222222222244444444</div>
</div>
</body>
</html>
效果：
注释掉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 属性来控制这些框的堆放次序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:20px;
width: 100%;}
#body-div{
padding:15px;
background-color:#a0c8ff;
border:1px solid #000000;
}
#body-div div{
padding:10px;
background-color:#fff0ac;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="body-div">
<div class="item1">Box-1</div>
<div class="item2">Box-2</div>
<div class="item3">Box-3</div>
</div>
</body>
</html>
如图：
为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，堆叠次序与父元素相同。
