最近學(xué)習(xí)CSS相關(guān)知識(shí)李丰，定位是其中的一個(gè)難點(diǎn)鹦肿。不了解其中細(xì)節(jié)，有時(shí)候在使用的時(shí)候會(huì)弄得一團(tuán)糟玫镐。本篇文章整理下關(guān)于定位屬性的具體理解與應(yīng)用倒戏。
一、簡(jiǎn)介
1.文檔流
在介紹postion之前恐似，有必要先了解下文檔流杜跷。
簡(jiǎn)單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機(jī)制就是用文檔流模型的，即塊元素（block）獨(dú)占一行葛闷，內(nèi)聯(lián)元素（inline）憋槐，不獨(dú)占一行。
一般使用margin是用來隔開元素與元素的間距淑趾；padding是用來隔開元素與內(nèi)容的間隔阳仔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔扣泊，讓內(nèi)容（文字）與（包裹）元素之間有一段“距離”近范。
只要不是float和絕對(duì)定位方式布局的，都在文檔流里面延蟹。
表現(xiàn)如下：
<div style="border:1px solid black">div1</div>
<div style="border:1px solid red">div2</div>
這是一張圖片
<img src="test.png">
2.position屬性介紹
- static评矩，默認(rèn)值。位置設(shè)置為static的元素阱飘，它始終會(huì)處于文檔流給予的位置斥杜。
- inherit，規(guī)定應(yīng)該從父元素繼承 position 屬性的值俯萌。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”果录。
- fixed，生成絕對(duì)定位的元素咐熙。默認(rèn)情況下弱恒，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定棋恼。不論窗口滾動(dòng)與否返弹，元素都會(huì)留在那個(gè)位置。但當(dāng)祖先元素具有transform屬性且不為none時(shí)爪飘，就會(huì)相對(duì)于祖先元素指定坐標(biāo)义起，而不是瀏覽器窗口。
- absolute师崎，生成絕對(duì)定位的元素默终，相對(duì)于距該元素最近的已定位的祖先元素進(jìn)行定位。此元素的位置可通過 “l(fā)eft”犁罩、”top”齐蔽、”right” 以及 “bottom” 屬性來規(guī)定。
- relative床估，生成相對(duì)定位的元素含滴，相對(duì)于該元素在文檔中的初始位置進(jìn)行定位。通過 “l(fā)eft”丐巫、”top”谈况、”right” 以及 “bottom” 屬性來設(shè)置此元素相對(duì)于自身位置的偏移勺美。
不管是哪種定位，都必須有一個(gè)參照物碑韵。找對(duì)了參照物赡茸，就成功了一半。
二泼诱、相對(duì)定位
relative生成相對(duì)定位的元素坛掠，相對(duì)于其正常位置進(jìn)行定位。
相對(duì)定位完成的過程如下：
- 按默認(rèn)方式（static）生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)治筒。
- 相對(duì)于以前的位置移動(dòng)屉栓，移動(dòng)的方向和幅度由 left、right耸袜、top友多、bottom 屬性確定，偏移前的位置保留不動(dòng)堤框。
實(shí)例
<style type="text/css">
#box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: yellow;
}
#box2 {
margin: 20px;
width: 200px;
height: 200px;
background-color: red;
/*position: relative;
left: 100px;
top: 100px;*/
}
</style>
<div id="box1"></div>
<div id="box2"></div>
其中box2中的注釋代碼未生效前域滥，是按照文檔流進(jìn)行排序呈現(xiàn)。
但是蜈抓，當(dāng)注釋代碼取消注釋生效后启绰，就會(huì)相對(duì)文檔流中應(yīng)當(dāng)呈現(xiàn)的位置進(jìn)行移動(dòng)。
所以沟使，相對(duì)定位的參照物是它本身委可。
三、絕對(duì)定位
絕對(duì)定位與相對(duì)定位的一大不同之處就是腊嗡，當(dāng)我們把一個(gè)元素設(shè)置成絕對(duì)定位着倾，那么這個(gè)元素將會(huì)脫離文檔流，其他元素就會(huì)認(rèn)為這個(gè)元素不存在于文檔流中而填充它原來的位置燕少。絕對(duì)定位元素根據(jù)它的參照物移動(dòng)自己的位置卡者，而參照物則需要根據(jù)它祖先元素的定位設(shè)置來確定。
所謂根據(jù)它祖先元素的定位設(shè)置來確定簡(jiǎn)單理解為：相對(duì)于該元素最近的已定位的祖先元素客们，如果沒有一個(gè)祖先元素設(shè)置定位崇决，那么參照物是body層。
實(shí)例
以上面的圖形來展示絕對(duì)定位的特性底挫∷宰可以看出最里層是兩個(gè)盒子，外面嵌套了兩層祖先元素凄敢。
1.祖先元素沒定位
在祖先元素沒定位的情況下，使用absolute湿痢。
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 30px;
}
在這種情況下涝缝，參考物就是body扑庞。
2.祖先元素有定位
祖先元素只要設(shè)置了值不為position:static之外的值，都視為有定位拒逮，并且最近的祖先元素會(huì)被設(shè)置為絕對(duì)定位元素的參照物罐氨。
#orange {
width: 400px;
height: 400px;
background-color: orange;
position: absolute;
}
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 220px;
}
在這種情況下，參考物就是最近的祖先元素滩援。
除了上述兩種情況外栅隐，在用戶沒給absolute元素設(shè)置left/right、top/bottom的情況下玩徊，所對(duì)應(yīng)的參考物會(huì)有變化租悄。
3.未設(shè)置left/right、top/bottom
在沒設(shè)置left/right恩袱、top/bottom的情況下泣棋，absolute元素的位置就是該元素在文檔流里的位置
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
}
上圖可以看出兩個(gè)盒子重疊了，這是因?yàn)椋篴bsolute元素由于沒有設(shè)置left/right畔塔、top/bottom就按照其應(yīng)該在文檔流中出現(xiàn)的位置進(jìn)行定位潭辈，而absolute元素脫離文檔流，紅色的盒子元素并不知道absolute元素的存在澈吨，就繼續(xù)放置在該位置把敢，并且absolute元素會(huì)覆蓋正常文檔流中的元素。
四谅辣、總結(jié)
主要介紹了相對(duì)定位和絕對(duì)定位修赞，其他定位方式比較簡(jiǎn)單，試一試就知道了屈藐。另外榔组，相對(duì)定位和絕對(duì)定位的應(yīng)用也比較靈活，適用于多種場(chǎng)景联逻。
