CSS 定位機(jī)制
CSS 有三種基本的定位機(jī)制：普通流软免、浮動(dòng)和絕對(duì)定位贰军。
一、普通流
除非專門指定份帐，否則所有框都在普通流中定位璃吧。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級(jí)元素從上到下依次排列废境，框之間的垂直距離由框的垂直margin計(jì)算得到畜挨。行內(nèi)元素在一行中水平布置爷辙。
二、定位
‰佟１膝晾、相對(duì)定位
被看作普通流定位模型的一部分，定位元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)务冕。使用相對(duì)定位的元素不管它是否進(jìn)行移動(dòng)血当，元素仍要占據(jù)它原來的位置。移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他的框禀忆。
<html>
<head>
<style type="text/css"> .box1{ background-color: red; width:100px; height:100px;
} .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px;
} .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
效果如下圖所示：
‰瘛２、絕對(duì)定位
相對(duì)于已定位的最近的祖先元素箩退，如果沒有已定位的最近的祖先元素离熏，那么它的位置就相對(duì)于最初的包含塊（如body）。絕對(duì)定位的框可以從它的包含塊向上戴涝、右滋戳、下、左移動(dòng)啥刻。
絕對(duì)定位的框脫離普通流奸鸯，所以它可以覆蓋頁(yè)面上的其他元素，可以通過設(shè)置Ｚ-Iindex屬性來控制這些框的堆放次序可帽。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: yellow;
}
#div2 {
width: 50%;
height: 50%;
background: red;
top: 100px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果如下圖所示：
備注：相對(duì)于已相對(duì)定位的祖先元素對(duì)框進(jìn)行絕對(duì)定位娄涩，在大多數(shù)現(xiàn)代瀏覽器中都可以實(shí)現(xiàn)的很好。
∮掣３蓄拣、固定定位
相對(duì)于瀏覽器窗口，其余的特點(diǎn)類似于絕對(duì)定位努隙。
三球恤、浮動(dòng)
浮動(dòng)的框可以在左右移動(dòng)，直到它的外邊框邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣剃法。浮動(dòng)的框脫離普通流碎捺。
如果包含塊太窄，無法容納水平排列的浮動(dòng)元素贷洲，那么其他浮動(dòng)塊向下移動(dòng)收厨，直到有足夠多的空間。如果浮動(dòng)元素的高度不同优构，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素卡住诵叁。
行內(nèi)元素會(huì)圍繞著浮動(dòng)框排列。
請(qǐng)看下圖钦椭，當(dāng)把框 1 向右浮動(dòng)時(shí)拧额，它脫離文檔流并且向右移動(dòng)碑诉，直到它的右邊緣碰到包含框的右邊緣：
再請(qǐng)看下圖，當(dāng)框 1 向左浮動(dòng)時(shí)侥锦，它脫離文檔流并且向左移動(dòng)进栽，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中恭垦，所以它不占據(jù)空間快毛，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失番挺。
如果把所有三個(gè)框都向左移動(dòng)唠帝，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框玄柏。
如下圖所示襟衰，如果包含框太窄，無法容納水平排列的三個(gè)浮動(dòng)元素粪摘，那么其它浮動(dòng)塊向下移動(dòng)瀑晒，直到有足夠的空間。如果浮動(dòng)元素的高度不同赶熟，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：
清除浮動(dòng)
簡(jiǎn)單介紹下清除浮動(dòng)的2中方法瑰妄。
方法一：結(jié)合:after選擇器清除浮動(dòng)陷嘴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .box1 { border: 1px solid red; background-color: yellow;
} .clear:after { content: "." ; display: block; height: 0; visibility: hidden; clear: both;
} .box2 { width: 50px; height: 50px; float: left; background-color: orange;
} p { float: right;
}
</style>
</head>
<body>
<div class="box1 clear">
<div class="box2"> box2 </div>
<p> lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦 </p>
</div>
</body>
</html>
方法二映砖，在容器最后添加一個(gè)空元素并且清理它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .box1 { border: 1px solid red; background-color: yellow;
} .empty{ clear: both;
} .box2 { width: 50px; height: 50px; float: left; background-color: orange;
} p { float: right;
}
</style>
</head>
<body>
<div class="box1 clear">
<div class="box2"> box2 </div>
<p> lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦
lallalalalalal啦啦啦 </p>
<br class="empty" />
</div>
</body>
</html>
效果均如下所示：
附錄：
CSS position 屬性總結(jié)：
所有主流瀏覽器都支持 position 屬性灾挨。position屬性規(guī)定元素的定位類型邑退，影響元素框生成的方式。
可能的值
absolute
生成絕對(duì)定位的元素劳澄，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位地技，如果不存在這樣的父元素，則依據(jù)最初的包含快秒拔。根據(jù)用戶代理的不同莫矗，最初的包含塊可能是畫布或 HTML 元素。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定砂缩，也可以通過z-index進(jìn)行層次分級(jí)作谚。
（元素框從文檔流完全刪除，并相對(duì)于其包含塊定位庵芭。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊妹懒。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣双吆。元素定位后生成一個(gè)塊級(jí)框眨唬，而不論原來它在正常流中生成何種類型的框会前。）
fixed
生成固定／絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位匾竿。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定瓦宜。
（元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身岭妖。）
relative
生成相對(duì)定位的元素歉提，相對(duì)于其正常位置進(jìn)行定位。
因此区转，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素苔巨。
（相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置废离。元素框偏移某個(gè)距離侄泽。元素仍保持其未定位前的形狀，仍保留原本所占的空間蜻韭。 ）
static
默認(rèn)值悼尾。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明肖方，即上述聲明無效）闺魏。
（元素框正常生成。塊級(jí)元素生成一個(gè)矩形框俯画，作為文檔流的一部分析桥，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中艰垂。）
inherit ：規(guī)定應(yīng)該從父元素繼承 position 屬性的值泡仗。
CSS 定位屬性
CSS 定位屬性允許你對(duì)元素進(jìn)行定位。
| 屬性 | 描述 |
|---|---|
| position | 把元素放置到一個(gè)靜態(tài)的猜憎、相對(duì)的娩怎、絕對(duì)的、或固定的位置中胰柑。 |
| top | 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移截亦。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移柬讨。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移崩瓤。 |
| overflow | 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。 |
| clip | 設(shè)置元素的形狀姐浮。元素被剪入這個(gè)形狀之中谷遂，然后顯示出來。 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式卖鲤。 |
| z-index | 設(shè)置元素的堆疊順序肾扰。 |
