什么是定位呢？
定位（position），故名思议，就是确定元素在页面中的位置。
CSS的常用定位有两种，一种是相对定位，一种是绝对定位。
下面我们看例子
-
<html> -
<head> -
<style> -
#div0 { -
/* 设置背景色为黄色 */ -
background-color:yellow; -
/* 设置边框为1px的线条 */ -
border:1px solid; -
/* 设置宽度为800px */ -
width:800px; -
} -
#div1, #div2 { -
/* 设置宽度为300px */ -
width:300px; -
/* 设置高度为300px */ -
height:300px; -
/* 设置边框为1px的线条 */ -
border:1px solid; -
} -
#div1 { -
/* 设置背景色为灰色 */ -
background-color:#888; -
} -
#div2 { -
/* 设置背景色为蓝色 */ -
background-color:#08c; -
} -
</style> -
</head> -
<body> -
<div id="div0"> -
<div id="div1"></div> -
<div id="div2"></div> -
</div> -
</body> -
</html>
有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。
可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。
由于div是块级元素，所以灰色和黄色的div不会在同一排显示。
测试1，相对定位
这个时候，我们给#div1，设置相对定位。
-
#div1 { -
/* 设置背景色为灰色 */ -
background-color:#888; -
/* 设置为相对定位 */ -
position:relative; -
/* 设置相对于自己，上面向下移动20px，左侧向右移动30px */ -
top:100px; -
left:150px; -
}
当我们给灰色的#div1做了相对定位之后，#div1相对于自己原来的位置做了移动。
但是其他的元素#div0、#div2的位置都没有发生变化，也就是说，给元素做了相对定位之后，其他元素不受影响，还认为该元素，在其原来的位置。
测试2，一个子元素绝对定位，父元素无定位
我们再给#div1改成绝对定位
-
#div1 { -
/* 设置背景色为灰色 */ -
background-color:#888; -
/* 设置为绝对定位 */ -
position:absolute; -
/* 相对于页面html，上面向下移动20px，左侧向右移动30px */ -
top:100px; -
left:150px; -
}
这时发现，原来的黄色#div0坍塌了，这是因为，绝对定位，同样会产生类似于float的脱离文档流，绝对定位的元素，与其他元素不在同一层面，处于其他元素的上方。
当父元素#div0无定位时候，绝对定位是相对于html文档来做的定位，与其父元素无关。
测试3，一个子元素绝对定位，父元素有定位
当我们给父div设置一个定位后（绝对定位/相对定位都可以)，情况又发生了改变
#div0 {position:relative;}
从图上可以清楚的看到，#div1的位置，相对于父元素#div0发生了偏移。
也就是说，当父元素有定位，绝对定位是相对于父元素来做的定位。
测试4，两个子元素绝对定位，父元素无定位
现在我们给蓝色的#div2也做一个绝对定位，再来看一下效果。
-
#div2 { -
/* 设置背景色为蓝色 */ -
background-color:#08c; -
/* 设置为绝对定位 */ -
position:absolute; -
/* 相对于页面html，上面向下移动30px，左侧向右移动60px */ -
top:30px; -
left:60px; -
}
现在两个子元素都设置了绝对定位，那么他们就都处于其他元素的上方，黄色的父div，就在坍塌的只剩下一条线了。
那么两个子div，重叠在一起，到底怎样控制，谁在谁的上面呢？
可以用z-index属性来控制。
我们给#div1加上z-index属性
-
#div1 { -
/* ... 其他css代码 */ -
/* 设置层级为1 */ -
z-index:1; -
}
在css中，用z-index来设置元素的层级，默认是0,谁的z-index大，谁就在上面。
当给#div1设置z-index为1后，#div2的z-index是默认值0,#div1的z-index比#div2的大，那么#div1就在#div2的上方了。
同理，当你给一个元素的z-index设置为-1时，那么这个元素就会在文档下面，看不见了。
