首先要清楚，position需要top,bottom,left,right來配合實現定位。
舉個例子。
position:absolute;
top:10px;
bottom:10px;
left:10px
right:10px
接下來分別介紹一下position屬性的不嵌套使用（即該元素中沒有子元素使用position），和嵌套使用這兩種情況（即該元素中有子元素使用position）。
一、不嵌套使用：
（1）position:relative
這是相對於正常位置時的定位，看圖：
圖1-1
圖1-2
相信效果大家已經看到了，當用了position:relative；left：10px後，紅色div右邊已經和下面黑色參照div右邊重合，發生了
10px的位移，這也就是剛纔說的相對於正常位置的定位。
(2)position:absolute
這是絕對定位，相對於父容器定位（因爲實例中，沒有任何父容器，所以相對於父容器就是相對於瀏覽器定位），看圖：
圖1-3
圖1-4
圖1-5
通過這三張圖，我們可以看到，當把黑色div的屬性加上position：absolute時，它會先向左平移到父容器左邊，然後再通過設置top：0；
left：10px，移動到了父容器的頂部，且距離父容器左邊10像素。當然，它也就覆蓋了原來的紅色參照div。
(3)position:fixed
這個比較有意思，是固定定位，相對於瀏覽器，位置固定不變，看圖：
圖1-6
圖1-7
可以看到，當把網頁向下拉，黑色div的位置還是相對於瀏覽器頂部20像素，左邊50像素，就好像固定在了屏幕上一樣，和上面兩個例子比
起來，它好像會動態調整自己的位置，來達到不動的效果~~~是不是很有意思呢？
二、嵌套使用：
嵌套使用的話，會出現很多組合情況，在這就舉一個比較實用的例子吧，其他情況大家可以嘗試組合下，親自試試。
看下面這個圖，想一下，當我們想讓導航條，在父容器的底部且居中，而又不知道具體高度時，該怎麼做呢？
圖2-1
其實很簡單，只要將父容器加上：position：relative；子容器加上：position：absolute；bottom：0；left：0；right：0；就行了，效果如下：
好了，本文到此結束！累死哥哥了>.<~~~