一壁畸、基礎(chǔ)概念
參考w3school 定位概述
1.塊級元素和行內(nèi)元素
div前酿、h1 或 p 元素常常被稱為塊級元素患雏。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”罢维。與之相反淹仑，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中肺孵，即“行內(nèi)框”匀借。
您可以使用 display 屬性改變生成的框的類型。這意味著平窘，通過將 display 屬性設(shè)置為 block吓肋，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣。還可以通過把 display 設(shè)置為 none瑰艘，讓生成的元素根本沒有框是鬼。這樣的話，該框及其所有內(nèi)容就不再顯示紫新，不占用文檔中的空間均蜜。
2.CSS 定位機(jī)制
CSS 有三種基本的定位機(jī)制：普通流、浮動和絕對定位芒率。
除非專門指定囤耳，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定紫皇。
塊級框從上到下一個接一個地排列慰安，框之間的垂直距離是由框的垂直外邊距計算出來。
行內(nèi)框在一行中水平布置聪铺』溃可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距铃剔。但是撒桨，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度键兜。由一行形成的水平框稱為行框（Line Box）凤类，行框的高度總是足以容納它包含的所有行內(nèi)框。不過普气，設(shè)置行高可以增加這個框的高度谜疤。
二、position
參考CSS position詳解
**提示：因為絕對定位的框與文檔流無關(guān)现诀，所以它們可以覆蓋頁面上的其它元素夷磕。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序仔沿。
**
- static：這個值表示默認(rèn)坐桩，讓瀏覽器按照沒有position屬性去渲染塊
- relative： 在static基礎(chǔ)上進(jìn)行偏移；如往左偏20像素封锉，position:relative;left:-20px;绵跷；這里用英文“相對”，指的是相對自己的static位置成福；而且偏移后碾局，static位置保留空白；偏移后可能與其他框重疊闷叉，重疊后的層次是渲染層次（后渲染的框在上面）擦俐。
- absolute：簡單的說，absolute與relative的區(qū)別是握侧，relative在原來的static位置留白，而absolute不留白嘿期。
然后是一個比較復(fù)雜的問題品擎，relative是相對于static位置的左上角進(jìn)行偏移；可absolute的static位置已經(jīng)被清理了备徐， 它相對于哪里偏移萄传？答案是相對于“離自己最近的非static祖先”的左上角。可能不好理解秀菱，直接上例子1振诬，注意塊三的位置，偏移原點是body的左上角衍菱，這是因為塊三的祖先容器依次為：塊二赶么、body，而塊二的position沒有規(guī)定脊串，默認(rèn)為static辫呻，再向上就是body了（body再向上沒有了）。
image.png
再看這個琼锋，和上一圖區(qū)別是放闺，我們給塊二直接內(nèi)嵌了一個position:absolute，顯示結(jié)果完全不一樣缕坎。首先解釋塊二怖侦，由static變成了absolute，但并沒有給出偏移量谜叹，所以偏移為0础钠，停留在原來的static位置。再看塊四叉谜，由于塊二是absolute旗吁，因此塊二的原來的static位置被清空了，塊四要代替塊二停局，出現(xiàn)在塊一的下方很钓，這就是看上去塊二和塊四重疊了。至于塊三董栽，根據(jù)偏移原則码倦，塊三的祖先序列是塊二、body锭碳，而塊二就是非static的（注意袁稽，如果塊二是relative也可以，區(qū)別是不會塊二塊四重疊現(xiàn)象擒抛，這里不再上圖推汽，請讀者自行去驗證），所以偏移是相對塊二的左上角而言的歧沪。
image.png
提示：因為絕對定位的框與文檔流無關(guān)歹撒，所以它們可以覆蓋頁面上的其它元素≌锇可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序暖夭。
- fixed：跟absolute相似，沒有滾動條的情況下沒有差異。在有滾動條的情況下迈着，fixed的塊偏移原點始終是window的左上角竭望。也就是說，即便滾動條發(fā)生變化裕菠，fixed的元素咬清，也不會隨著滾動條來回移動，而absolute則會隨滾動條移動糕韧》阏瘢可以這么理解，fixed：固定在當(dāng)前window不動萤彩， absolute：會隨參照對象元素的高度和寬度變化而變化粪滤。一般fixed用在遮蓋層和固定在頁面某個位置，如固定在頂端的菜單欄雀扶，又如彈出提示框居中顯示杖小。
<html>
<head>
<style>
*{border:1px solid #ff0000;}
.setSize{width:200px;height:100px}
.pStatic{position:static;left:50px;top:50px}
.pRelative{position:relative;left:10px;top:100px}
.pAbsolute{position:absolute;left:10px;top:200px}
.pFixed{position:fixed;left:10px;top:100px}
</style>
</head>
<body>
<div>第一個塊</div>
<div class="pStatic">第二個塊</div>
<div class="pAbsolute">第三個塊</div>
<div>第四個塊</div>
<div>第五個塊</div>
</body>
</html>
