div+css定位position詳解

1.div+css中的定位position 最主要的兩個屬性：屬性 absolute(絕對定位) relative(相對定位)，有他們才造就了div+css佈局的多樣性，讓我們的網頁豐富多彩起來。

首先解釋relative(相對定位)，顧名思義，定位是相對的，那他是相對於什麼呢？參照物是什麼？

看如下代碼：

2.預覽效果，現在是三個併列的div

3.給中間的div增加定位屬性：position:relative; top:10px; left:10px;

4.預覽效果：

5.很明顯它現在移動的參照物就是它原來所占據的位置

    註意看代碼top:10px;left10px;

    也就是相對於頂部下移10px，相對於左邊，向右移動10px;

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

現在把position:relative; 修改為absolute;

6.發現預覽效果不明顯，那麼修改top:30px；left30px;

現在的預覽效果如下：

7.發現中間的div脫離了文檔流，右側的和左側div挨著了，現在中間的div的位置是從瀏覽器的左上角開始計算位置即向下移動30像素，向右移動30像素。

    現在就涉及到一個層級的關係，設置div的z-index屬性，數值越大的，層顯示在最上邊，可以自行試試。