深入了解css中的position屬性

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

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

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

• relative 相對定位
  使得該元素相對於他原來在文件中的位置進行定位。透過top、left、bottom、left這四個屬性值，來改變它的位置。
  以上還很好理解。
  “ 不好理解在這裡：為元素進行相對定位，會保留該元素原來佔據的文檔流空間。當對該元素進行相對定位時，例如top：20px;使得該元素距離距離他原來佔據的空間頂部20px。 ##absolute

  絕對定位
• 絕對定位會完全從文件流中拿出來，元素之前佔據的空間也被回收啦。絕對定位元素的定位依賴於其定位上下文。

  要注意的是：這裡寫過絕對定位可以將行內元素變成區塊級元素的表現形式。但確定就是一旦將行內元素進行絕對定位後，該元素的位置不好掌握，（原因：如果該元素沒有設定內外邊距，且前後左右也沒有絕對定位元素，那麼該元素會暫時停留在自己原來的位置，但是如果該元素設定了外邊距，那麼該元素會暫時停留在距原來位置一個外邊距的距離。會尋找最上面一個不是絕對定位的元素下面。
  
  定位上下文的理解：相對於另一個元素移動該定位元素的位置，那麼「另一個元素」即為該元素的定位上下文。

  絕對定位元素的任何祖先元素都可以成為他的定位上下文，只需把對應的祖先元素設定為position:relative;即可。

  如果其祖先元素都沒有設定相對定位的，那麼該絕對元素的預設定位上下文為body。

  
  
  
  

  fixed  固定定位

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

  。
  
  

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

【相關推薦】

1. 

免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤（2）－css影片教學

#

以上是深入了解css中的position屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！