CSS定位属性position的应用
我们可以通过CSS中的float属性进行页面布局，利用它可以做出很多效果。如果想让布局出现在页面中固定的位置，需要用什么属性进行设置呢？ 本篇文章我们学习定位功能的常用方法，它可以打破页面布局的局限性，让你做出更富想象力的页面。
定位属性position
定位属性是position，它有四个属性，分别为：
- static：默认值。
- relative：相对定位。
- absolute：绝对定位。
- fixed：固定定位。
static，默认值
说到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就是让元素继续按照文档流显示，不作出任何改变。
relative，相对定位
位置属性被设置为relative之后，被设置的元素会被设置到相对于原来正常位置的地方。比如，设置relative后，再设置left:20px，那么这个元素会被移动到距原来正常位置20像素的水平位置。示例：CSS部分：
.left20 {Html部分：
position:relative;
left:20px;
}
<p>左侧顶格内容</p>
<p class="left20" >相对坐标，离左侧正常位置20像素。</p>
absolute，绝对定位
位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。这个定义听起来比较空洞，还是举例说明更加直接。CSS部分：
#pos_left {Html部分：
position:absolute;
left:20px;
top:50px;
background:#F00;
width:150px;
height:150px;
}
#pos_right {
position:absolute;
right:20px;
top:50px;
background:#000;
width:50px;
height:50px;
color:#FFF;
overflow:hidden;
}
<div id="pos_left">绝对定位的红色色块，距左侧20像素，距顶部50像素。</div>上面例子中的CSS的父层是body，所以它们的定位是依据body来定位的，效果如图一所示。如果将Html部分修改一下，变成：
<div id="pos_right">绝对定位的黑色色块，距右侧20像素，距顶部50像素。</div>
<div id="pos_left">效果如图二。为什么会变成这样？答案就在前面介绍的定义中，“被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）”，修改过的Html书写方法将pos_right写在了pos_left里面，使pos_left成为了pos_right的父层，所以这个绝对坐标就被定义在了包含pos_right的pos_left里面。不知道这样说是不是足够清楚。
<div id="pos_right">父层是pos_left，这里绝对定位的黑色色块，距pos_left内部右侧20像素，距pos_left顶部50像素。</div>
</div>
固定位置，fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。但是目前它在IE6中不被支持，只有IE7和Firefox浏览器可以识别，如果非要让它在IE6中正常显示，需要进行较复杂的定义，所以我们在这里就不继续探讨fixed的使用方法了，了解它的意思即可。
