在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。
第一部分：position: static
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
如html代码如下：
<div class="wrap"> <div class="content"></div>
</div>
css代码如下：
.wrap{width: 300px;height: 300px; background: red;}.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}
效果图如下：
我们发现，虽然设置了static以及top，但是元素仍然出现在正常的流中。
第二部分：fixed定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。
html代码如下：
<div class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</div>css代码如下：
body{height:1500px; background: green; font-size: 30px; color:white;}.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}
效果图如下：
即右下角的div永远不会动，就像经常弹出来的广告！！！
值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。
第三部分：relative定位
相对定位元素的定位是相对它自己的正常位置的定位。
关键：如何理解其自身的坐标呢？
让我们看这样一个例子，hmtl如下：
<h2>这是位于正常位置的标题</h2><h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
css代码如下：
.pos_bottom{position:relative; bottom:-20px;}.pos_right{position:relative;left:50px;}
效果图如下：
即bottom:-20px;；向下移动。 left:50px;向右移动。
