position屬性比起其他的基礎(chǔ)屬性來講要復(fù)雜一些，我在這試著把里面的門道全部總結(jié)出來。
目前position有以下這些值粗蔚，請把注釋讀三遍：
static：
對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用担败。
relative：
對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過[top]镰官，[right]提前，[bottom]，[left]這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素泳唠。
absolute：
對象脫離常規(guī)流狈网，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素笨腥，則一直回溯到body元素拓哺。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊脖母，而且士鸥，絕對定位層的margin:auto``會失效。
fixed：
表現(xiàn)與absolute一致谆级。但偏移定位是以窗口為參考烤礁，沒有定位祖先元素的概念讼积。當出現(xiàn)滾動條時，對象不會隨著滾動脚仔。
center：
與absolute一致勤众，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中鲤脏。（CSS3）
page：
與absolute一致们颜。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊猎醇，否則取決于每個absolute模式窥突。（CSS3）
sticky：
對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體硫嘶，當在屏幕中時按常規(guī)流排版波岛，當卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果音半。（CSS3）
上面雖然列了很多值，但是最后的三個值贡蓖，雖然理想很美好曹鸠，目前包括Chrome最新版本，和IE11都不支持斥铺，所以我干脆劃掉彻桃。
現(xiàn)在需要研究的依然是static、relative晾蜘、absolute邻眷、fixed。
研究的過程各種的測試剔交，不多說了肆饶，花了我兩個小時測試加寫本文，所以我直接上結(jié)論：
名詞解釋：盒子模型
在CSS中岖常，每一個元素都由一個矩形盒子所包含驯镊。每一個盒子都會具有一個內(nèi)容區(qū)，內(nèi)容區(qū)被一個內(nèi)邊距所包裹竭鞍，內(nèi)邊距外是盒子的邊框板惑，并且在邊框之外會有一個外邊距用于與其他盒子分隔開來。下圖是我在網(wǎng)上找的偎快。
注意兩個名詞解釋：
容器：最外的寬高范圍冯乘，也就是下圖算上top之類的寬高范圍
內(nèi)容：最內(nèi)部的寬高范圍
名詞解釋：定位祖先
定位祖先這個詞是跟absolute綁定的，跟relative晒夹、fixed裆馒、static無關(guān)姊氓。定位祖先從字面上理解，就是負責定位的祖先领追。也就是說他膳，祖先的位置決定了absolute的位置。祖先的寬和高等屬性可以被繼承绒窑，但是absolute的margin:auto會失效棕孙，margin: xxpx是有效的。
定位祖先可以是父元素些膨，也可以不是蟀俊。
關(guān)于定位祖先的更多介紹，看下文订雾。
在沒有設(shè)置偏移的前提下肢预，relative、absolute洼哎、fixed三者的區(qū)別：
先說一句：不設(shè)偏移跟偏移設(shè)成0是兩碼事烫映。
為什么先討論沒有偏移的前提，因為沒有偏移的前提下噩峦，relative锭沟、absolute、fixed還是很乖的识补，行為比較容易理解族淮，跟有偏移的情況有所不同。下面看：
- relative沒有偏移的前提下表現(xiàn)可以視為static凭涂，至少可以先這么簡單的理解祝辣，所以，我們經(jīng)常為了給absolute找一個定位祖先切油，會給某個祖先元素設(shè)個relative蝙斜。只要別給這祖先設(shè)偏移，那么這個祖先該吃吃該喝喝澎胡，就當static乍炉，所以你找個祖先元素當定位祖先，給它設(shè)個relative滤馍，通常沒風險岛琼，就算給body設(shè)個relative，也沒事巢株。
- absolute和fixed沒有偏移的前提下槐瑞，它們所在的空間會被下面的元素占據(jù)，它們自身的位置由父元素的容器決定阁苞。若absolute沒設(shè)偏移困檩，則聽爸爸的祠挫，有定位祖先也不好使。若設(shè)置了偏移之后悼沿，absolute眼里就只有定位祖先等舔，爸爸也不一定好使，除非爸爸就是定位祖先糟趾。fixed沒設(shè)偏移慌植，也聽爸爸的，設(shè)了偏移就聽瀏覽器窗口和爸爸的义郑。下面都有介紹蝶柿。
- absolute和fixed在表現(xiàn)上的區(qū)別：fixed會保持在瀏覽器窗口的固定位置，absolute不是非驮。
在設(shè)置偏移的前提下交汤，relative、absolute劫笙、fixed三者的區(qū)別：
- 先說relative芙扎，比如給relative設(shè)個
right: 10px;，那么它和它的孩子們會往左挪10px填大，然而它的兄弟們會紋絲不動纵顾，它的祖先也紋絲不動。 - 然后說absolute栋盹，比如給absolute設(shè)個
right: 10px;，這時候分為有定位祖先和沒定位祖先兩種情況敷矫。 - 一直說的所謂定位祖先例获，可以是relative、absolute曹仗、fixed其中任意一個榨汤。注意，只有后代元素設(shè)了偏移怎茫，你這個定位祖先才有意義收壕，否則后代元素都聽爸爸的，沒定位祖先什么事轨蛤。定位祖先通常來講是relative蜜宪，因為relative不設(shè)偏移就跟static似的，思考問題比較簡單祥山。如果自己和祖先都是absolute圃验，也允許。如果定位祖先是fixed缝呕，同樣也允許澳窑。所以千萬不要以為只有relative可以當定位祖先斧散！先追溯到誰，誰就當定位祖先摊聋，不管定位祖先是relative還是absolute還是fixed鸡捐。定位祖先生效的時候，按定位祖先的容器所在位置當做后代元素偏移的參考麻裁。
- 沒有定位祖先箍镜，也就是祖先一直追溯到body標簽也沒找到，這時候就一種情況悲立，就是拿body當定位祖先鹿寨，偏移以body容器為參考。
- 最后說fixed薪夕，這回情況又不一樣了脚草。具體說，fixed的位置由
top原献、right馏慨、bottom、left這四個屬性各自有沒有設(shè)置姑隅、設(shè)置了多少写隶，再考慮上父元素的容器位置，總共五大方面來決定讲仰，其實也不復(fù)雜： - 假設(shè)只設(shè)置
top: 10px慕趴，那么fixed相對于瀏覽器窗口的上偏移就是10px，左偏移沒有設(shè)鄙陡，就依據(jù)父元素的容器位置冕房。這個特性，通常被用于網(wǎng)頁的sidebar區(qū)域的內(nèi)容導(dǎo)航趁矾。 - 假設(shè)只設(shè)置
right: 10px;耙册，那么fixed相對于瀏覽器窗口的右側(cè)偏移就是10px，上偏移沒有設(shè)毫捣，就依據(jù)父元素的容器位置详拙。 - 假設(shè)
top: 10px;right: 10px;，那么所有祖先元素都跟我不再有關(guān)系蔓同，我就只跟著瀏覽器窗口饶辙。這個特點，通常被用于網(wǎng)頁左右角落的漂浮廣告斑粱，另外還有屏幕居中的彈出層等等畸悬。 - 同理，假設(shè)只設(shè)
bottom: 10px，跟top: 10px類似蹋宦，假設(shè)只設(shè)left: 10px披粟，跟right: 10px類似，不多說冷冗。如果top和bottom全有呢守屉？我先說句你神經(jīng)病，然后告訴你蒿辙，只有top起效拇泛。
relative、absolute思灌、fixed互相嵌套俺叭、互為兄弟，會發(fā)生什么泰偿？
- 下級元素通常不會影響上級元素熄守。為什么強調(diào)“通常”耗跛？因為當上級元素不設(shè)width/height的時候裕照，下級元素如果是static或者relative，就有可能撐開上級元素调塌，也就“影響了上級元素”晋南。但是，這種撐開其實并不影響下級元素的定位羔砾，因為撐開是往右側(cè)和下側(cè)撐大负间，定位是基于左上角。
- 上級元素對下級元素要么沒影響姜凄，要么就影響x或y軸政溃，要么就全影響。影響的時候檀葛，下級元素的基準坐標就是上級容器的位置，從上級容器的padding內(nèi)開始計算腹缩。當上級元素沒有border和padding屿聋，這時也要注意margin疊加現(xiàn)象。
- 兄弟元素的影響就是占位or不占位藏鹊，上面有提到润讥。
- 占位當然好說了，就是我當你不存在盘寡，然后占了你的位置楚殿，我的位置跟你無關(guān)。所以記住竿痰，absolute脆粥、fixed是“沒有兄弟”的砌溺，它們永遠認為自己是獨生子，而且隨時準備當不孝子（一旦設(shè)偏移就可能跑出父親的懷抱）变隔，所以它們的兄弟也不客氣规伐，也當它們是空氣。兩個兄弟absolute的話就是兩個自以為是的獨生子匣缘，也是互相當空氣猖闪。兩個兄弟fixed也是如此。
- 不占位就是relative肌厨，那么考慮個復(fù)雜情況：兩個兄弟relative之間會發(fā)生什么培慌？答案是第二個relative會假設(shè)第一個relative沒有偏移，只考慮第一個元素的最外范圍柑爸。如果第一個元素有margin范圍吵护，提起margin，我們都知道“margin疊加”現(xiàn)象竖配，這是另外的知識何址，這里不說，只需知道兩個兄弟relative也會margin疊加进胯。
- 最后記住兩點特別的用法：第一是absolute的定位祖先用爪，第二是fixed只考慮父元素，就行了胁镐。下面專門說說這兩點偎血。
當relative、absolute盯漂、fixed為定位祖先元素颇玷，absolute為后代元素時，absolute的偏移是怎么計算的就缆？
答：absolute的偏移計算帖渠，完全考慮定位祖先的偏移、margin竭宰、border空郊、padding，從祖先的內(nèi)容區(qū)開始計算偏移切揭。因為absolute只服定位祖先狞甚，親爸爸也沒用，所以祖先內(nèi)的其他任何文本和元素都會被忽略廓旬。
當relative哼审、absolute、fixed為父元素，fixed為子元素涩盾，fixed的實際偏移是怎么計算的十气？
假設(shè)fixed有top，那么縱軸就跟父元素無關(guān)了旁赊，橫軸呢桦踊？會計算父元素的left、margin终畅、bottom籍胯、padding，也就是說fixed的偏移离福，是從padding里面的內(nèi)容區(qū)開始計算的杖狼。因為fixed以為自己是獨生子，所以父元素內(nèi)的其他任何文本和元素都會被忽略妖爷。
同理蝶涩，假設(shè)fixed有l(wèi)eft，那么橫軸就跟relative無關(guān)了絮识，縱軸會計算父元素的top绿聘、margin、bottom次舌、padding熄攘，是從padding里面的內(nèi)容區(qū)開始計算的。因為fixed以為自己是獨生子彼念，所以父元素內(nèi)的其他任何文本和元素都會被忽略挪圾。
relative、absolute逐沙、fixed碰巧視覺疊加在一起了哲思，誰在前誰在后？
不復(fù)雜不多說吩案，你以為的就是對的棚赔。后代元素在前，后寫的在前徘郭。由z-index來改變順序。但是崎岂，它們?nèi)齻€跟static的區(qū)別在于捆毫，static的子元素如果溢出父元素闪湾，是被隱藏的冲甘，而它們?nèi)齻€沒這種說法。
設(shè)置了relative、absolute江醇、fixed之后濒憋，還設(shè)置了float:left;，會怎樣陶夜？
float:left;不起作用凛驮。
