1、div+css中的定位position 最主要的兩個屬性：absolute(絕對定位)、relative(相對定位)

   （1）absolute(絕對定位)，位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文件流，因此不佔據空間。

   （2）relative(相對定位)，定位是相對的，那他是相對於什麼呢？參照物是什麼？

   看程式碼：

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style>

<div id="left"></div>

<div id="center"></div>

<div id="right"></div>
</span>
 

  2、relative(相對定位)，給中間的div增加定位屬性：position:relative; top:10px; left:10px;

  程式碼：

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;position:relation;top:<span style="font-family:KaiTi_GB2312;">1</span>0px;left:<span style="font-family:KaiTi_GB2312;">1</span>0px;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style>

<div id="left"></div>

<div id="center"></div>

<div id="right"></div></span>
 

  結果：很明顯它現在移動的參照物就是它原來所佔據的位置

  注意：位置屬性 top、 right 、left 、bottom 只能引用相鄰的兩個邊，不能只用上下，或者只用左右。

  3、absolute(絕對定位)，給中間的div增加定位屬性：position:absolute; top:30px; left:30px;

  程式碼：

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;position:absolute;top:30px;left:30px;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style></span>
 

  效果：

  結果：

  發現中間的div脫離了文件流，右側的和左側div挨著了，現在中間的div的位置是從瀏覽器的左上角開始計算位置即向下移動30畫素，向右移動30畫素。現在就涉及到一個層級的關係，設定div的z-index屬性，數值越大的，層顯示在最上邊。

   想要了解更多的小夥伴們可以點選這裡：