往往在网页布局中会出现覆盖，这时我们需要使用定位技术了。什麽是定位，通俗来说就是你想让元素在哪个位置。
CSS定位的基本思想很简单，它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素
甚至浏览器窗口本身的位置。
相对定位(position：relative)-元素依然是占位的
使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。使用relative，即相对定位，除了将position属性
设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>position属性</title>
<style type="text/css">
body{
margin:20px;
font-family:Arial;
font-size:12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block1 {
position: relative;
bottom: 30px;
right: 30px;
}
#block2{
}
</style>
</head>
<body>
<div id="father">
<div id="block1">Box-1</div>
<div id="block2">Box-2</div>
</div>
</body>
</html>
现在我们可以得到这样的结论，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。
而该相对定位的盒子则仍然位于标准流中，它对父块没有任何影响,对兄弟盒子也没有任何影响。
注意：上面是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，都会相对于原有的位置进行指定
的偏移并到达新的位置，而这一偏移并不会对其后面的兄弟元素带来任何的影响。
绝对定位(position：absolute)-元素不占位，盒子宽度变为自适应
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，
那么会以浏览器窗口为基准进行定位。再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，
其他的盒子就好像这个盒子不存在一样。如果设置了绝对定位，而没有设置偏移属性，那么它仍然保持原有的位置。
#block2 {
position: absolute;
top: 30px;
right: 30px;
}
上面block2没有已经定位的祖先元素，是以浏览器窗口为基准进行定位。
#father {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
position: relative;
}
给父级增加一个定位样式，block2就会以父级为参照进行偏移。
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#outerBox {
200px;
height: 100px;
margin: 10px auto;
background: silver;
}
#innerBox {
position: absolute;
top: 70px;
100px;
height: 50px;
background: orange;
}
</style>
</head>
<body>
<div id="outerBox">
<div id="innerBox"></div>
</div>
</body>
</html>
外面的盒子没有设置position属性，内部的盒子设置了绝对定位，但是只在垂直方向指定了偏移量，没有指定水平方向的偏移量，
此时内部的盒子则因为设置了绝对定位属性，而外层div没有position属性，所以的它的定位基准是浏览器窗口。但是又由于在水平方向
上没有设置偏移属性，因此在水平方向它仍然会保持原来应该在的位置，它的左侧与外层盒子的左侧对齐。因为在垂直方向上设置了
“top:70px”，所以距离浏览器窗口顶部为70像素。
固定定位(position：fixed)-元素不占位的，宽度变为自适应
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。它与绝对定位有些类似，区别主要在于
定位的基准不是祖先，而是浏览器窗口或其它显示设备窗口。也就是当访问者拖动浏览器的窗口滚动条时，固定定位的元素相对于浏
览器窗口的位置保持不变。
z-index空间位置(设置定位元素的层叠关系，只对定元素生效位)
z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大
的页面位于其小的上方。z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之
间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系，z-index可以为负值。