前言
CSS的position屬性對于大多數人來說都是很熟悉的了，但是真正用的時候才發現，理解問題有時候還是太片面了。
官方定義
在W3School上對CSS position屬性的定義是：
position屬性規定元素的定位類型，這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
在仔細看上面的定義的時候，我發現一個平常都忽略的點，
絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型，為了驗證這句話，我寫了一個簡單的例子如下
<!--這里是HTML代碼-->
<span id="box"></span>
/*這里是對應的CSS代碼*/
#box{
width: 100px;
height: 100px;
border: 1px solid;
}
在上面的例子中，id是box的元素是一個內聯的span元素，對于內聯元素來說，width，height，padding-top，padding-bottom，margin-top，margin-bottom都不能改變，所以設置的width和height其實是不起作用的，但是，如果給span加一個 position:absolute 或者position:fixed的屬性，就會發現，設置的width和height起作用了，span變成了一個塊級元素。
一般來說我們想讓內聯元素變成塊級元素采用的方法都是使用display相關的屬性，只是不知道使用position也能達到一樣的效果。
| 默認值 | static |
|---|---|
| 繼承性 | no |
| 版本 | CSS2 |
| JavaScript語法 | object.style.position = "absolute"; |
| 值 | 描述 |
|---|---|
| static | 默認值，沒有定位，元素出現在正常的流中，忽略top，bottom，left，right或者z-index聲明。 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過 "left"，"right"，"top"，"bottom" 屬性進行規定 |
| relative | 生成相對定位的元素，相對于其正常位置進行定位，定位方式同上 |
| fixed | 生成絕對定位元素，相對于瀏覽器窗口進行定位，定位方式同上 |
| inherit | 規定應該從父元素繼承position 屬性的值 |
我的理解
在上面的說明中，可以總結出以下幾點：
- position不是一個繼承屬性，如果想要子元素繼承父元素的position屬性則應該使用 position:inherit 進行顯式說明。
- 使用absolute進行絕對定位是相對于除static以外的第一個父元素進行定位，這個我想起了之前做過的一個東西：在一個圖片的右上角顯示一個刪除按鈕，具體效果如圖：
實現過程大概是這樣的
<!--這里是HTML代碼-->
<div id="box">
<div>測試</div>
</div>
/*這里是對應的CSS代碼*/
#box{
width: 100px;
height: 100px;
position: relative;
}
#box img{
width: 100px;
height: 100px;
}
#box div{
background-color: orange;
position: absolute;
width: 50px;
height: 30px;
left: 25px;
top:35px;
}
當然后面看看覺得直接給div設置background-image屬性會簡單的多，這也是后話了。
- 當position是static的時候不支持z-index等一系列屬性，也就是說如果想讓一個元素顯示在另一個元素上面的時候，可以使用position:relative來代替position:static，只要不使用偏移使元素離開文本流，position:relative和在正常流中展示的情況是相同的。
- 使用position可以完成導航欄一直在頁面最上部的效果。
<!--這里是HTML代碼-->
<div id="nav">導航欄</div>
<div id="box"></div>
///////////
/*這里是對應的CSS代碼*/
#box{
width: 100px;
height: 1000px;
border: 1px solid;
}
#nav{
position: fixed;
top:0;
}
在上面的代碼中由于id是box的div的高度很高，所以對瀏覽器來說會產生滾動條，但是在向下滾動的時候，導航欄一直位于瀏覽器的頂部。
- 其實left和right，top和bottom如果一起使用會發生沖突，所以最好只使用兩對中的其中一個，如果同時聲明了top，bottom，bottom屬性是不會顯示出來的，left和right中，right屬性是不會顯示出來的。
上面就是我目前對position屬性的全部理解了，有什么遺漏的或者理解不對的歡迎指正和補充。祝好～
