css層模型說的是position這個屬性，它有四個常用值，分別是static、relative、absolute、fixed。

1.static：這個是元素的默認值，特點是頁面會依照自左向右、自上向下的方向布局，並且設置top、right、bottom、left值是沒有用的，並且設置z-index也是沒有用的，不能進行特殊定位；

2.relative：相對定位，什麽是相對？相對於誰？相對是 相對於自身 原本不設置此屬性值時 應該在的位置，即默認的文檔流應該在的位置。特點是，設置此屬性值後該元素依然占據著原本屬於自己的位置，但是可以通過設置top、right、bottom、left（簡稱TRBL）、z-index值來改變相對於自身的位置。

打個比方就是原來所有的元素都在一層樓平鋪，現在設置後該元素會上升到二層樓，但是雖然“我”雖然在二層，腳下原本屬於“我”的一層樓的位置“我”還占據著，誰也不給。這樣就可以在占據原本位置的情況下，通過設置上右下左的值飄在一層元素的頭上。

這樣做本身沒有多大意義，也不經常使用。經常的用法是作為後代元素的“參照物”，什麽意思稍後再說。

3.absolute：絕對定位，絕對定位常用於定位在頁面中顯示位置特殊、用盒子模型不容易定位的位置。特點是，設置此屬性後，該元素會脫離原來的文檔流，其他的和相對定位相同。

打個比方就是“我”原來在一層，設置此屬性值後，“我”上升到二層的高度，“我”腳下的原來的位置也不要了，依據默認的文檔流，後面的元素會補充在我腳下，占據“我”原來的位置。

然後問題來了，“我”定位時怎麽辦呢，相對定位是上升到二層還能待在自己原本的位置，那“我”怎麽辦，“我”不能也相對於自己原來的位置定位啊，如果和相對定位一樣，那設計時為什麽定義兩個效果一樣的屬性值，設計師閑得慌？那“我”該怎麽辦？

辦法就是“我”得①尋找一個參照物，參照物？什麽是參照物？此處說的參照物就是上文中提到的relative相對定位，當然也可以是absolute和fixed當做參照物，但不能是默認的static。有了這個方法，“我”就去找參照物了，那麽問題又來了，怎麽找？兄弟元素、子代元素的定位能作為參照嗎？當然不能，“我”需要順著②DOM樹向直系祖先元素找，其他的旁系都不管。那麽又有問題了，“我”的父級元素和祖父級元素都設置了定位，我該相對於誰？答案③是最近的祖先元素，也就是父級元素。最後一個問題？？？怎麽這麽多，我想定個位就這麽難嗎......臉上笑嘻嘻的繼續找，心裏mmp。問題是，如果“我”一直找一直找，到最後也沒有找到符合條件的祖先元素呢？有說“我”是相對於瀏覽器窗口左上角的、也有說是相對於body的？“我”到底該相信誰.....最後經過“大量”實踐，“我”自己得出，他們說的都對，但是都有前提條件。啊，這個真的復雜，不知道如何組織語言。。。

1）相對於body，因為body有個默認的margin外邊距8px，上右下左都有,（條件不重置body的外邊距且不設置TRBL），那麽“我”就是相對於body左上角定位的，給body設置外邊距，“我”就會跟著它走，同樣給它設置border、padding也會影響“我”的位置。

div距上左的值就是html的盒子模型值+body的盒子模型值，同時相對於body定位，跟著body走。

2）相對於瀏覽器窗口左上角，（條件，設置TRBL值 且 垂直和水平方向都至少有一個值），設置後，div就不管html和body了。

div設置了left和top值，即垂直方向上和水平方向上都有值，那麽div就會相對於瀏覽器窗口的左上角定位，html和body都右移了，而div不管，你們愛去哪去哪，“我”就相對於瀏覽器窗口左上角定位；

3)第三種情況比較特殊，前兩種結合。。。。。尼瑪，還有這操作。。。

div的上邊距20px就是定位時top：20px，相對於瀏覽器窗口上邊；左邊距定位時沒有設置，所以它的70px=body-margin-left+body-border-left+body-border-left=50+10+10，相對於body；

總結一下就是，定位時垂直方向 或 水平方向上，如果設置值，那麽這個方向就按設置的這個值相對於瀏覽器窗口定位；如果這個方向上沒有設置值，那麽就按照在這個方向上的html+body的盒子模型的值之和定位。其實歸根結底還是相對於瀏覽器窗口，在這個方向上，如果定位時設置了值，那麽就按這個值，如果沒有就按這個方向上的盒子模型的值之和。

註：absolute經常和relative配合使用。

4.fixed，固定定位，相對於瀏覽器窗口的左上角，常用於廣告位、懸浮窗、頭部、底部的定位，特點是脫離文檔流，不會隨著鼠標的滾動而滾動，就相對於瀏覽器窗口固定死了不動。

註：只有設置relative、absolute、fixed後，z-index屬性才會生效。

表達能力不佳，可能讀者讀完也不知所雲，我相信兩句話：盡信書不如無書 和 絕知此事要躬行。所以我建議，讀者還是自己親自實踐，我只是參考。

有誤請指出，非常感謝！

css模型之層模型