1 定位概述
CSS 定位 (Positioning) 屬性允許你對元素進(jìn)行定位
定位的基本思想很簡單蠢沿，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置西傀，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置
使用 display 屬性改變生成的框的類型。將 display 屬性設(shè)置為 block（塊）洪添，可以讓行內(nèi)元素顯示的像塊級元素一樣/*inline（內(nèi)聯(lián)） ?inline-block（內(nèi)聯(lián)塊）*/
position（位置） 屬性值的含義：
static/*靜態(tài)*/ ?元素框正常生成。
relative/*相對*/ ?元素框偏移某個距離幸撕。
absolute/*絕對*/ ?元素框從文檔流完全刪除薇组，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊坐儿。
fixed/*固定*/ ?元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute律胀，不過其包含塊是視窗本身
2 相對定位
對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上貌矿，通過設(shè)置垂直或水平位置炭菌，讓這個元素“相對于”它的起點(diǎn)進(jìn)行移動
div {
? width: 200px;
? height: 200px;
? background-color: #766ac5;
? position: relative;
? top: 50px;
? left: 30px
}
運(yùn)行效果：
在使用相對定位時，無論是否進(jìn)行移動逛漫，元素仍然占據(jù)原來的空間黑低。因此，移動元素會導(dǎo)致它覆蓋其它框酌毡。
3 絕對定位
設(shè)置為絕對定位的元素框從文檔流完全刪除克握，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊枷踏。元素原先在正常文檔流中所占的空間會關(guān)閉菩暗，就好像該元素原來不存在一樣。元素定位后生成一個塊級框旭蠕，而不論原來它在正常流中生成何種類型的框停团。
div {
? width: 200px;
? height: 200px;
? background-color: #766ac5;
? position: absolute;
? top: 50px;
? left: 30px
}
運(yùn)行效果：
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素掏熬，那么它的位置相對于最初的包含塊
因?yàn)榻^對定位的框與文檔流無關(guān)佑稠，所以它們可以覆蓋頁面上的其它元素∑旆遥可以通過設(shè)置z-index ?屬性來控制這些框的堆放次序舌胶。
div {
? width: 200px;
? height: 200px;
? background-color: #766ac5;
? position: absolute;
? top: 50px;
? left: 30px；
? z-index: -1
}
運(yùn)行效果：
默認(rèn)的 z-index 是 0疮丛。z-index -1 擁有更低的優(yōu)先級辆琅。z-index 1 擁有更高的優(yōu)先級。
4 浮動
浮動的框可以向左或向右移動这刷，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹埂Ｓ捎诟涌虿辉谖臋n的普通流中娩井，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣暇屋。
div {
? width: 200px;
? height: 200px;
? background-color: #766ac5;
? float: left
}
運(yùn)行效果：
clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。
div { clear: both } ?/*清除兩側(cè)浮動*/
5洞辣，固定定位
div {
? width: 200px;
? height: 200px;
? background-color: #766ac5;
? position: fixed;
? top: 50px;
? left: 30px
}
運(yùn)行效果：
固定定位它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身咐刨，不會隨滑動條的滑動而改變所在視圖中的位置
