深入瞭解css中的position屬性

不知道，看我寫 前端知識的程式員們，有沒有和我一樣的感覺，我每次寫完html結構，然後寫css樣式內容時，心裡有一個樣子，但是實現後，ctrl+save確是另一個樣子，心裡真是不爽啊。
對於position這個屬性，我每次設定他的時候，都會或多或少有點意外。
面試過兩三次，但是卻沒有被問到這個，心裡還是有僥倖的心理的。

• position
  這個屬性一共有四個值。

• static 靜態定位
  預設布局。如果是區塊層級元素就會在頁面中自上而下的堆疊起來。如果是行內元素就會在一行內由左至右延續，如果裝不下就會換行，裝下了繼續。

• relative 相對定位
  使得該元素相對於他原來在文檔中的位置進行定位。通過top、left、bottom、left這四個屬性值，來改變它的位置。
  以上還很好理解。
  “ 不好理解在這裡：為元素進行相對定位，會保留該元素原來佔據的文檔流空間。當對該元素進行相對定位時，比如top：20px;使得該元素距離距離他原來佔據的空間頂部20px。也就是該元素向下移動了20px，但是除了該元素移動了一段距離，頁面上其他元素並沒有發生任何變化。”

• absolute 絕對位置
  絕對位置會徹底從文檔流中拿出來，元素之前佔據的空間也被回收啦。絕對位置元素的定位依靠其定位上下文。
  需要注意的是：這裡寫過絕對位置可以將行內元素變為區塊層級元素的表現形式。但是確定就是一旦將行內元素進行絕對位置後，該元素的位置不好掌握，（原因：如果該元素沒有設定內外邊距，且前後左右也沒有絕對位置元素，那麼該元素會暫時停留在自己原來的位置，但是如果該元素設定了外邊距，那麼該元素會暫時停留在距原來位置一個外邊距的距離。如果他前後左右都是設定了絕對位置的元素，那麼該元素會尋找最上面一個不是絕對位置的元素下面。<有沒有後悔聽原因啦>）所以，一點那設定了絕對位置需要馬上為該元素進行top、left定位。

  定位內容相關的理解：
  相對於另一個元素移動該定位元素的位置，那麼“另一個元素”即為該元素的定位上下文。
  絕對位置元素的任何祖先元素都可以成為他的定位上下文，只需把相應的祖先元素設定為position:relative;即可。
  如果其祖先元素均沒有設定相對定位的，那麼該絕對元素的預設定位上下文為body。

• fixed 固定定位
  絕對位置也是完全移除文檔流。但是他的定位上下文為視口，即瀏覽器視窗。
  固定定位不常用，最常見的情況是，用它建立不隨網頁而滾動而移動的導航。

我在做練習是，最習慣的就是將父元素進行相對定位，然後對要其子項目需要定位的進行絕對位置。
雖然有些網頁也有父元素絕對位置，子項目相對父元素再絕對位置，我不太喜歡這樣寫，因為父元素的位置還需要再定位一遍。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程