Position屬性四個(gè)值：static战授、fixed、absolute和relative的區(qū)別和用法
在用CSS+DIV進(jìn)行布局的時(shí)候桨嫁，一直對(duì)position的四個(gè)屬性值relative,absolute,static,fixed分的不是很清楚植兰，以致經(jīng)常會(huì)出現(xiàn)讓人很郁悶的結(jié)果。今天研究了一下璃吧，總算有所了解楣导。在此總結(jié)一下：
先看下各個(gè)屬性值的定義：
1、static（靜態(tài)定位）：默認(rèn)值肚逸。沒(méi)有定位爷辙，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2朦促、relative（相對(duì)定位）：生成相對(duì)定位的元素膝晾，通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常（原先本身）位置進(jìn)行定位∥衩幔可通過(guò)z-index進(jìn)行層次分級(jí)血当。
3、absolute（絕對(duì)定位）：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位臊旭。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定落恼。可通過(guò)z-index進(jìn)行層次分級(jí)离熏。
4佳谦、fixed（固定定位）：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位滋戳。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定钻蔑。可通過(guò)z-index進(jìn)行層次分級(jí)奸鸯。
static與fixed的定位方式較好理解咪笑，在此不做分析。下面對(duì)應(yīng)用的較多的relative和absolute進(jìn)行分析：
1娄涩、relative
定位為relative的元素脫離正常的文本流中窗怒，但其在文本流中的位置依然存在。
他是默認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)蓄拣，無(wú)父級(jí)則以文本流的順序在上一個(gè)元素的底部為原始點(diǎn)扬虚，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)球恤，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位孔轴，有以下屬性：
1)如果沒(méi)有TRBL，以父級(jí)的左上角碎捺，在沒(méi)有父級(jí)的時(shí)候，他是參照瀏覽器左上角(到這里和absolute第一條一樣)贷洲，如果在沒(méi)有父級(jí)元素的情況下收厨，存在文本，則以文本的底部為原始點(diǎn)進(jìn)行定位并將文字?jǐn)嚅_(kāi)(和absolut不同)优构。
2)如果設(shè)定TRBL诵叁，并且父級(jí)沒(méi)有設(shè)定position屬性，仍舊以父級(jí)的左上角為原點(diǎn)進(jìn)行定位(和absolut不同)钦椭。
3)如果設(shè)定TRBL拧额，并且父級(jí)設(shè)定position屬性(無(wú)論是absolute還是relative)，則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位彪腔，位置 由TRBL決定(前半段和absolute一樣)侥锦。如果父級(jí)有Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)德挣，進(jìn)行定位(后半段和absolut不 同)恭垦。
以上三點(diǎn)可以總結(jié)出，無(wú)論父級(jí)存在不存在，無(wú)論有沒(méi)有TRBL番挺，均是以父級(jí)的左上角進(jìn)行定位唠帝，但是父級(jí)的Padding屬性會(huì)對(duì)其影響。
綜合上面對(duì)relative的敘述玄柏，我們就可以將position屬性為relative的DIV視成可以用TRBL進(jìn)行定位的的普通DIV襟衰，或者說(shuō) 只要將我們平時(shí)布局頁(yè)面的div的CSS屬性中加上position:relative后，就不只是用float布局頁(yè)面了粪摘，還可以用TRBL進(jìn)行布局頁(yè) 面 了瀑晒，或者說(shuō)加上position:relative的DIV也可以像普通的DIV進(jìn)行布局頁(yè)面了，只不過(guò)還可以用TRBL進(jìn)行布局頁(yè)面赶熟。但是 position屬性為absolute不可以用來(lái)布局頁(yè)面瑰妄，因?yàn)槿绻脕?lái)布局的話，所有的DIV都相對(duì)于瀏覽器的左上角定位了映砖，所以只能用于將某個(gè)元素 定位于屬性為absolute的元素的內(nèi)部某個(gè)位置间坐。
Top的值表示對(duì)象相對(duì)原位置向下偏移的距離，bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離邑退，兩者同時(shí)存在時(shí)竹宋，只有Top起作用。
left的值表示對(duì)象相對(duì)原位置向右偏移的距離地技，right的值表示對(duì)象相對(duì)原位置向左偏移的距離蜈七，兩者同時(shí)存在時(shí)，只有l(wèi)eft起作用莫矗。
黃色背景的層定位為relative飒硅，紅色邊框區(qū)域?yàn)槠湓谡Ａ髦械奈恢谩Ｔ谕ㄟ^(guò)top作谚、left對(duì)其定位后三娩，從灰色背景層的位置可以看出其正常位置依然存在。
2妹懒、absolute
定位為absolute的層脫離正常文本流雀监，但與relative的區(qū)別是其在正常流中的位置不再存在。
這個(gè)屬性總是有人給出誤導(dǎo)眨唬。說(shuō)當(dāng)position屬性設(shè)為absolute后会前，總是按照瀏覽器窗口來(lái)進(jìn)行定位的，這其實(shí)是錯(cuò)誤的匾竿。實(shí)際上瓦宜，這是fixed屬性的特點(diǎn)。
1)如果沒(méi)有TRBL(top岭妖、right歉提、bottom笛坦、left)，以父級(jí)的左上角苔巨，在沒(méi)有父級(jí)的時(shí)候版扩，他是參照瀏覽器左上角,如果在沒(méi)有父級(jí)元素的情況下，存在文本侄泽，則以它前面的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開(kāi)文字礁芦，覆蓋于上方。
2)如果設(shè)定TRBL悼尾，并且父級(jí)沒(méi)有設(shè)定position屬性柿扣，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定闺魏。
3)如果設(shè)定TRBL未状，并且父級(jí)設(shè)定position屬性(無(wú)論是absolute還是relative)，則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位析桥，位置由 TRBL決定司草。即使父級(jí)有Padding屬性，對(duì)其也不起作用泡仗，說(shuō)簡(jiǎn)單點(diǎn)就是：它只堅(jiān)持一點(diǎn)埋虹，就以父級(jí)左上角為原點(diǎn)進(jìn)行定位，父級(jí)的padding對(duì)其根 本沒(méi)有影響娩怎。
以上三點(diǎn)可以總結(jié)出搔课，若想把一個(gè)定位屬性為absolute的元素定位于其父級(jí)元素內(nèi)，只有滿足兩個(gè)條件：
第一：設(shè)定TRBL
第二：父級(jí)設(shè)定Position屬性
上面的這個(gè)總結(jié)非常重要截亦，可以保證你在用absolue布局頁(yè)面的時(shí)候爬泥，不會(huì)錯(cuò)位，并且隨著瀏覽器的大小或者顯示器分辨率的大小崩瓤，而不發(fā)生改變急灭。
只要有一點(diǎn)不滿足，元素就會(huì)以瀏覽器左上角為原點(diǎn)谷遂，這就是初學(xué)者容易犯錯(cuò)的一點(diǎn)，已經(jīng)定位好的板塊卖鲤，當(dāng)瀏覽器的大小改變肾扰，父級(jí)元素會(huì)隨之改變，但是設(shè) 定Position屬性為absolute的板塊和父級(jí)元素的位置發(fā)生改變蛋逾，錯(cuò)位了集晚，這就是因?yàn)榇藭r(shí)元素以瀏覽器的右上角為原點(diǎn)的原因。
初學(xué)者很容易犯錯(cuò)的是区匣，不清楚Position屬性為absolute的板塊偷拔，若想定位到父級(jí)板塊中，并且當(dāng)瀏覽器的大小改變或顯示器的分辨率改變，布局不發(fā)生改變莲绰，是需要滿足兩個(gè)條件的欺旧，只要有一點(diǎn)不滿足，元素就會(huì)以瀏覽器左上角為原點(diǎn)蛤签，從而導(dǎo)致頁(yè)面布局錯(cuò)位辞友。
Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離，bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離震肮，兩者同時(shí)存在時(shí)称龙，只有Top起作用；如果兩者都未指定戳晌，則其頂端將與原文檔流位置一致鲫尊，即垂直保持位置不變。
left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離沦偎，right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離疫向，兩者同時(shí)存在時(shí)，只有l(wèi)eft起作用扛施；如果兩者都未指定鸿捧，則其左邊將與原文檔流位置一致，即水平保持位置不變疙渣。
在Position屬性值為absolute的同時(shí)匙奴，如果有一級(jí)父對(duì)象（無(wú)論是父對(duì)象還是祖父對(duì)象，或者再高的輩分妄荔，一樣）的Position屬性值為Relative時(shí)泼菌，則上述的相對(duì)瀏覽器窗口定位將會(huì)變成相對(duì)父對(duì)象定位，這對(duì)精確定位是很有幫助的啦租。
3哗伯、relative與absolute的主要區(qū)別
首先，是上面已經(jīng)提到過(guò)的在正常流中的位置存在與否篷角。
其次焊刹，relative定位的層總是相對(duì)于其最近的父元素，無(wú)論其父元素是何種定位方式恳蹲。如圖3：
圖中虐块，紅色背景層為relative定位，其直接父元素綠色背景層為默認(rèn)的static定位嘉蕾。紅色背景層的位置為相對(duì)綠色背景層top贺奠、left個(gè)20元素。而如果紅色背景層定位為absolute错忱，則情形如下：
[圖片上傳失敗...(image-ce44bd-1600852423389)]
可 以看到儡率，紅色背景層依然定義top:20px挂据；left:20px；但其相對(duì)的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層儿普。因 此崎逃，對(duì)于absolute定位的層總是相對(duì)于其最近的定義為absolute或relative的父層，而這個(gè)父層并不一定是其直接父層箕肃。如果其父層中都未定義absolute或relative婚脱，則其將相對(duì)body進(jìn)行定位，如圖：
除top勺像、left障贸、right、bottom定位外吟宦，margin屬性值的定義也符合上述規(guī)則篮洁。
總結(jié)：
屬性為relative的元素可以用來(lái)布局頁(yè)面，屬性為absolute的元素用來(lái)定位某元素在父級(jí)中的位置殃姓，既然屬性為absolute的元素用來(lái)定位某元素在父級(jí)中位置袁波，就少不了TRBL，這時(shí)候根據(jù)一開(kāi)始講的absolute的第三條蜗侈，如果父級(jí)元素沒(méi)有position屬性那么 absolute元素就會(huì)脫離父級(jí)元素篷牌，但是如果是布局頁(yè)面，父級(jí)元素position的屬性又不能為absolute踏幻，不然就會(huì)以瀏覽器左上角為原點(diǎn) 了枷颊，所以父級(jí)元素的position屬性只能為relative！
如果用position來(lái)布局頁(yè)面该面，父級(jí)元素的position屬性必須為relative夭苗，而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用 absolute隔缀，因?yàn)樗皇芨讣?jí)元素的padding的屬性影響题造，當(dāng)然你也可以用position，不過(guò)到時(shí)候計(jì)算的時(shí)候不要忘記padding的值
**Note : **絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)猾瘸。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外界赔，滾動(dòng)條不會(huì)出現(xiàn)。
什么是文檔流牵触？
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流淮悼。
只有三種情況會(huì)使得元素脫離文檔流，分別是：浮動(dòng)絕對(duì)定位和相對(duì)定位荒吏。
z-index屬性
z-index，又稱為對(duì)象的層疊順序渊鞋，它用一個(gè)整數(shù)來(lái)定義堆疊的層次绰更，整數(shù)值越大瞧挤，則被層疊在越上面，當(dāng)然這是指同級(jí)元素間的堆疊儡湾，如果兩個(gè)對(duì)象的此屬 性具有同樣的值特恬，那么將依據(jù)它們?cè)贖TML文檔中流的順序?qū)盈B，寫(xiě)在后面的將會(huì)覆蓋前面的徐钠。需要注意的是癌刽，父子關(guān)系是無(wú)法用z-index來(lái)設(shè)定上下關(guān)系 的，一定是子級(jí)在上父級(jí)在下尝丐。
Note：使用static 定位或無(wú)position定位的元素z-index屬性是無(wú)效的显拜。
