CSS 定位模式
static 静态定位，默认定位方式（无定位意思）。
relative 相对定位，是相对于它原来的位置设置的。
absolute 绝对定位，是相对于它的上级元素来设置的。
fixed 固定定位，以浏览器的可视区域为准。
语法：
div {
postion: static;
}
偏移量
使用top、bottom、left、right属性，分别表示上下左右的偏移量，可以指定像素值或百分比。
以上四个样式只能在使用定位样式时使用。
相对定位 relative
特性：
① 偏移是相对于它原来的位置设置的。
② 原位置依然保留（其他标签不可以占据它的位置）。
HTML代码：
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
CSS代码：
<style type="text/css">
.one,
.two,
.three {
width: 100px;
height: 60px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
</style>
效果：
将绿色DIV（two）设置为相对定位，顶部偏移20px，左侧偏移量120px。
<style type="text/css">
.one,
.two,
.three {
width: 100px;
height: 60px;
}
.one {
background-color: red;
}
.two {
background-color: green;
position: relative;
top: 20px;
left: 120px;
}
.three {
background-color: blue;
}
</style>
效果：
可以看出，绿色DIV（two）偏移后，蓝色DIV（three）未占据绿色DIV（two）的位置。
所以相对定位原位置依然保留。
绝对定位 absolute
偏移位置相对于它的上级标签来设置的。
特性：
① 但上级标签需要设置定位，一般上级标签设置相对定位。如果所有上级标签都未设置定位样式，则以浏览器为准。
② 如果上级标签没有设置定位（相对、绝对、固定），则以最近有设置定位的上级标签为准。
③ 绝对定位不再占据原位置，所以其它标签会占用它原来的位置。
示例代码依然采用相对定位示例代码。
现在将绿色DIV（two）设置为绝对定位，顶部偏移20px，左侧偏移量120px。
<style type="text/css">
.one,
.two,
.three {
width: 100px;
height: 60px;
}
.one {
background-color: red;
}
.two {
background-color: green;
position: absolute;
top: 20px;
left: 120px;
}
.three {
background-color: blue;
}
</style>效果：
可以看出，蓝色DIV（three）上移，绝对定位不再占据原位置。
此时绿色DIV（two）偏移是以浏览器窗口为准的。
上级标签增加定位样式
HTML代码：
<div class="f">
<div class="s">
</div>
</div>
CSS代码：
<style type="text/css">
.f {
height: 200px;
width: 200px;
background-color: gray;
}
.s {
height: 60px;
width: 60px;
background-color: gold;
}
</style>
效果：
设置灰色DIV相对定位，偏移量为0，金色DIV绝对定位，顶部和左侧偏移量均为50%。
<style type="text/css">
.f {
position: relative;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: gray;
}
.s {
position: absolute;
top: 50%;
left: 50%;
height: 60px;
width: 60px;
background-color: gold;
}
</style>
效果：
金色DIV的偏移标准是根据灰色DIV来的。
此时金色DIV左上角位于灰色DIV中心。如果灰色DIV不设置定位（相对、绝对、固定），则金色DIV左上角会位于浏览器中心。
偏移量也可是设置像素点，不设置百分比，像素点超过灰色DIV宽高后，会跑出灰色DIV范围。
固定定位 fixed
特性：
① 以浏览器的可视区域为准，不参照上级节点。
② 显示位置不随滚动条改动。
③ 不占据原来的位置。
示例代码使用相对定位代码
设置绿色DIV（two）固定定位，顶部偏移量5px，右侧偏移量5px。
<style type="text/css">
.one,
.two,
.three {
width: 100px;
height: 60px;
}
.one {
background-color: red;
}
.two {
position: fixed;
top: 5px;
right: 5px;
background-color: green;
}
.three {
background-color: blue;
}
</style>
效果：
即使网页过长出现滚动条，拉动滚动条后绿色DIV（two）位置也不会变动，因为固定定位是以浏览器的可视区域为准的。
叠放次序 z-index
特性：
① 只有增加定位样式的标签，才能设置此样式。
② 设置数值越大越靠上（默认为0）。
③ 设置相同数值后，后声明的标签靠上。
示例代码使用相对定位的HTML结构。
CSS：
<style type="text/css">
.one,
.two,
.three {
width: 100px;
height: 60px;
}
.one {
position: absolute;
top: 50px;
left: 50px;
background-color: red;
}
.two {
position: absolute;
top: 100px;
left: 100px;
background-color: green;
}
.three {
position: absolute;
top: 150px;
left: 150px;
background-color: blue;
}
</style>
效果：
可以看出标签出现覆盖情况。
设置绿色DIV（two）z-index 属性：
.two {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
background-color: green;
}
效果：
定位特性
1. 行内标签添加绝对或固定定位，可以直接设置高度和宽度，不需要display：block;。
2. 块级标签添加绝对或固定定位，如果不设置高度和宽度，默认大小是内容的大小。
3. 浮动标签（float）会覆盖其他标签，但不会覆盖内部文本。而绝对和固定定位会覆盖其他所有标签的内容。
