position的四个属性值： relative ，absolute ，fixed，static

position的四个属性值： relative ，absolute ，fixed，static 

下面分别讲述这四个属性，以简单代码表示

<span style="font-size:18px;"><div id="parent">
     <div id="sub1">sub1</id>
     <div id="sub2">sub2</id>
</div></span>

1. relative

relative属性是相对它本身来进行偏移的。

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。

<style>
    #sub1,#sub2{
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	margin: 20px;
    }
   #sub1{
    	position: relative;
    	left: 50px;
    	top: 50px;
    }
</style>

如果此时把sub2的position也设置为relative，依然和sub1一样，按照它原来应有的位置进行偏移。

<style>
    #sub1,#sub2{
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	margin: 20px;
    }
   #sub2{
    	position: relative;
    	left: 50px;
    	top: 50px;
    }
</style>

注意relative的偏移是基于对象的margin的左上侧的。

2. absolute

当position属性设为absolute后，并不是按照浏览器窗口来进行定位的，因为这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意absolute偏移以parent的padding的左上角开始进行定位，而不是以margin的左上端开始定位。

sub2的位置呢，由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于parent一样，它漂浮了起来。此时sub2将获得sub1的位置，它的文档流不再基于sub1，而是直接parent开始。

<style>
    #sub1,#sub2{
    	width: 100px;
    	height: 100px;
    	border: 1px solid black;
    }
   #sub1{
    	position: absolute;
    	left: 200px;
    	top: 50px;
    }
    #parent{
    	position: absolute;
    	margin: 50px;
    	padding: 50px;
    	width: 600px;
    	height: 300px;
    	border: 1px solid black;
    }
</style>

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

3. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位，fix定位后上下滚动页面div是不会变的。

4. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。