blog.csdn.net/sofia92/article/details/504699481、網(wǎng)站布局中Position屬性四個值的區(qū)別和用法
用Div+CSS進行網(wǎng)站布局時，做一些浮動層等特殊效果時要考慮到定位問題椎椰。這就要用到Position屬性等用含。
position屬性有四個可選值磕诊，它們分別是：static哮兰、relative结缚、absolute竿痰、fixed脆粥。
static（靜態(tài)定位）：是默認值，元素出現(xiàn)在正常的流中影涉。不會受到top, bottom, left, right影響变隔。該屬性值是所有元素定位的默認情況，在一般情況下蟹倾，我們不需要特別的去聲明它匣缘，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身鲜棠，從而可以用position:static取消繼承肌厨，即還原元素定位的默認值。
relative：相對定位元素的定位是相對自己原本的正常位置relative會導致自身位置的相對變化豁陆，而不會影響其他元素的位置柑爸、大小的變化。
Top的值表示對象相對原位置向下偏移的距離盒音，bottom的值表示對象相對原位置向上偏移的距離表鳍，兩者同時存在時，只有Top起作用祥诽。left的值表示對象相對原位置向右偏移的距離譬圣，right的值表示對象相對原位置向左偏移的距離，兩者同時存在時雄坪，只有l(wèi)eft起作用胁镐。
absolute：將對象從文檔流中拖出，其層疊通過z-index屬性定義。此時對象不具有邊距盯漂，但仍有補白和邊框颇玷。絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素就缆，那么它的位置相對于<html>帖渠。
1. absolute元素脫離了文檔結構。和relative不同竭宰，其他三個元素的位置重新排列了空郊。只要元素會脫離文檔結構，它就會產(chǎn)生破壞性切揭，導致父元素坍塌狞甚。Absolutely定位使元素的位置與文檔流無關，因此不占據(jù)空間廓旬。
2. absolute元素具有“包裹性”哼审。之前的寬度是撐滿整個屏幕的，而此時的寬度剛好是內容的寬度孕豹。
3. absolute元素具有“跟隨性”涩盾。雖然absolute元素脫離了文檔結構，但是它的位置并沒有發(fā)生變化励背，還是老老實實的呆在它原本的位置春霍，因為我們此時沒有設置top、left的值叶眉。
4. absolute元素會懸浮在頁面上方址儒，會遮擋住下方的頁面內容。
使用絕對定位的層前面的或者后面的層會認為這個層并不存在衅疙，也就是在z方向上离福，它是相對獨立出來的，絲毫不影響到其它z方向的層炼蛤。
Top的值表示對象上邊框與瀏覽器窗口頂部的距離妖爷，bottom的值表示對象下邊框與瀏覽器窗口底部的距離，兩者同時存在時理朋，只有Top起作用絮识；如果兩者都未指定，則其頂端將與原文檔流位置一致嗽上，即垂直保持位置不變次舌。
left的值表示對象左邊框與瀏覽器窗口左邊的距離，right的值表示對象右邊框與瀏覽器窗口右邊的距離兽愤，兩者同時存在時彼念，只有l(wèi)eft起作用挪圾；如果兩者都未指定，則其左邊將與原文檔流位置一致逐沙，即水平保持位置不變哲思。
再提幾個小知識點。
1. 設置absolute會使得inline元素被“塊”化吩案，這在上一節(jié)將display時已經(jīng)說過棚赔；
2. 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的情況不多徘郭；
3. 上文提到了absolute會使元素懸浮在頁面之上靠益，如果有多個懸浮元素，層級如何確定残揉？答案是“后來者居上”
fixed：其實fixed和absolute是一樣的胧后，唯一的區(qū)別在于：absolute元素是根據(jù)最近的定位上下文確定位置，而fixed永遠根據(jù)瀏覽器確定位置抱环。元素的定位方式同absolute類似壳快，但它的包含塊是視區(qū)本身。在屏幕媒體如WEB瀏覽器中江醇，元素在文檔滾動時不會在瀏覽器視察中移動濒憋。例如何暇，它允許框架樣式布局陶夜。在頁式媒體如打印輸出中，一個固定元素會出現(xiàn)于第一頁的相同位置裆站。這一點可用于生成流動標題或腳注条辟。我們也見過相似的效果，但大都數(shù)效果不是通過CSS來實現(xiàn)了宏胯，而是應用了JS腳本羽嫡。
請?zhí)貏e注意，IE6不支持CSS中的position:fixed屬性肩袍。真的非常遺憾杭棵，要不然我們就可以試試這種酷酷的效果了。
即使窗口是滾動的它也不會移動：
Fixed定位使元素的位置與文檔流無關氛赐，因此不占據(jù)空間魂爪。
Fixed定位的元素和其他元素重疊。
IE6不支持CSS中的position:fixed屬性
【Z-index】
垂直定位：
Z軸方向上的層疊定位艰管。
Z-index默認值都為0滓侍，
但默認情況下，后來者會覆蓋前者牲芋，此時撩笆，如果需要改變層級關系捺球，就要通過改變z-index值來實現(xiàn)。z-index越大優(yōu)先級越高夕冲。
如果將 position 設為 relative (相對定位)氮兵，absolute (絕對定位) 或者 fixed (固定定位)，這樣的節(jié)點會覆蓋沒有設置 position 屬性或者屬性值為 static 的節(jié)點耘擂，說明前者比后者的默認層級高胆剧。
例如彈出層時用到最多。
在Position屬性值為absolute的同時醉冤，如果有一級父對象（無論是父對象還是祖父對象秩霍，或者再高的輩分，一樣）的Position屬性值為Relative時蚁阳，則上述的相對瀏覽器窗口定位將會變成相對父對象定位铃绒，這對精確定位是很有幫助的。
