CSS有三種基本的定位機制：普通流（文檔流），定位和浮動
- <strong>普通流</strong>：普通流中元素框的位置由元素在 XHTML 中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直 margin 計算得到。行內元素在一行中水平布置。
- <strong>定位</strong>：
① <strong>無定位（position:static）</strong>：默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom,left,right 或者 z-index 的聲明）
② <strong>相對定位（position:relative）</strong>：定位元素的位置相對于它在普通流中的位置進行移動。使用相對定位的元素<u>不管它是否進行移動，元素仍占據它原來的位置（空間）</u>，但移動元素會使該元素覆蓋其他的框。如"left:20px”會向元素的 LEFT 位置添加 20 像素。
下面我給了一個例子，可以發現在定位前后，粉框所占據的空間并沒有改變，但是粉框覆蓋到了黃框上。
③ <strong>絕對定位（position:absolute）</strong>：絕對定位的元素位置是相對于距離他最近的那個<u>已經定位的父級元素（相對/絕對）來決定的</u>。如果自身父級元素沒有定位，則往更上級的有定位的父級元素，如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊兒（body 或html 類似的）元素。以此類推。<u>絕對定位使元素與文檔流無關， 因此不占據空間</u>。
普通文檔流中其他的元素的布局不受絕對定位元素的影響。就等同于絕對定位的元素不存在一樣。
ps: 由于絕對定位的元素脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設置 z-Iindex 屬性來控制這些框的堆放次序。
下面我舉了一個例子，我們可以看到對粉框定位后，它下面的黃框上移占據了粉框原本的位置， 仿佛粉框不存在一般。
④ <strong>固定定位（position:fixed）</strong>：固定定位是絕對定位的一種，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport）。
- <strong>浮動</strong>：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 <u>由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣</u>。
如果包含塊太窄，無法容納水平排列的浮動元素，那么其他浮動元素向下移動，直到有足夠多的空間。如果浮動元素的高度不同，那么當它們向下移動時可能會被其他浮動元素卡住。
行內元素會圍繞著浮動框排列。例子如下圖：
1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流中的元素的位置由元素在 (X)HTML 中的位置決定。
- 通過定位與浮動的方法可以讓元素脫離文檔流。
2.有幾種定位方式，分別是如何實現定位的，使用場景如何？
<strong>共有四種定位方式</strong>：普通流，相對定位，絕對定位和固定定位。
- 相對定位（position:relative）：定位元素的位置相對于它在普通流中的位置進行移動。用于
- 絕對定位（position:absolute）：絕對定位的元素位置是相對于距離他最近的那個已經定位的父級元素（相對/絕對）來決定的。用于九宮格效果，整體布局等。
- 固定定位（position:fixed）：固定定位是絕對定位的一種，相對于瀏覽器窗口進行定位。用于廣告欄之類的固定位置使用。
參考：CSS絕對定位的應用
3.absolute, relative, fixed 偏移的參考點分別是什么
- absolute 參考點是相對于 static 定位以外的第一個已經定位的父級元素（相對/絕對）來決定的。
- relative 參考點是相對于其正常位置進行定位。
- fixed 參考點是相對于瀏覽器窗口進行定位。
4. z-index 有什么作用? 如何使用?
z-index：針對網頁顯示中的一個特殊屬性，為了表示三維立體的概念如元素的上下層的疊加順序引入了 z-index 屬性來表示 Z 軸。<strong>但其只對定位元素有效。</strong>下面是不同場景下的顯示順序：
① z-index 值：值較大的元素將疊加在 z-index 值較小的元素之上，正數值將疊加在負數值得對象上。
②相同 z-index 的疊加順序：
- 如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index 相同發生位置重合現象，那么按文檔流順序，后面的覆蓋前面的。
- 如果兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那么定位元素覆蓋未定位元素。
③父子關系處理：
- 如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致，會在父元素上方，即使是子元素的 z-index 值比父元素小，也會出現在父元素上方。
- 如果父元素z-index 失效（未定位或者使用默認值），那么定位子元素的 z-index 設置生效。
④兄弟之間子元素疊加順序：由其父元素決定，父元素值高的疊加低的，不管子元素 z-index 值得大小。
5.position:relative 和負 margin 都可以使元素位置發生偏移?二者有什么區別
position:relative 和負 margin 都可以使元素位置發生偏移。
- position:relative 的偏移所產生的結果是該元素仍占據它原來的位置（空間），但移動元素會使該元素覆蓋其他的框，也就是說不會影響整體的布局。
- 負 margin 的偏移所產生的結果是帶動該元素周圍的元素一起移動，也就是該元素不占據原來的位置，而是真的發生了偏移改變了布局。
下面我給出了兩個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.text1,
.text3 {
background-color: yellow;
width: 150px;
height: 100px;
margin: 0;
}
.text2 {
background-color: pink;
margin-top: 3px;
width: 150px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="text1"></div>
<div class="text2"></div>
<a href="#">這是一個鏈接</a>
<div class="text3"></div>
</body>
</html>
在該代碼的基礎上我添加了 position:relative 命令，使其在左方與下方分別增加了-30px。結果如下圖，我們可以發現 position:relative 命令所帶來的結果并不會改變 a 鏈接的位置發生任何變化。
在初始代碼的基礎上我又添加了負 margin 的命令，使其在左方與下方分別移動了 -30px。結果如下圖，我們可以發現負 margin 命令所帶來的結果不僅讓
a 元素的位置發生的變化，使得下方的 div 黃框也上移了。
<strong>總結</strong>：position:relative 的偏移不會帶動周圍元素的偏移，因為其元素仍占據該元素本來的位置。而負 margin 的偏移會帶來周圍元素的偏移。
6.如何讓一個固定寬高的元素在頁面上垂直水平居中?
利用 position:absolute 與負 margin 來實現。具體如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct{
position: relative;
height: 500px;
background-color: #eee;
}
.box{
position: absolute;
top: 50%;
left: 50%;
margin: -50px;
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
所以我們得到如下圖的結果，有寬高的 div 垂直水平居中了。
7.浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣。
對于不同的情況我舉了幾個例子：
- 正常形況下不浮動如下圖。
- 第一個框向右浮動，第二個框會頂上它的位置，效果如圖。
- 第一個框向左浮動，因為 box1 脫離文檔流，z-index值高，所以覆蓋 box2。效果如圖。
- 三個框均向左浮動，在包含快空間足夠的情況下依次排列，否則包含塊太窄無法容納水平排列三個浮動元素，那么其他浮動塊向下移動。兩個效果如下圖。
- 若浮動元素的高度不同，那么向下移動的時候可能會被卡住。效果如圖。
- 浮動會讓元素脫離文檔流,不影響不浮動元素。效果如圖。
- 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間，也就是常見的文字環繞。效果如圖。
參考：課件-浮動
8.清除浮動指什么? 如何清除浮動?
浮動元素引起的問題：
- 父元素的高度無法被撐開，影響與父元素同級的元素
- 與浮動元素同級的非浮動元素會跟隨其后
- 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
清楚浮動實際上為前面的浮動元素留出了垂直空間，也可以解決上面問題中的第二個問題與第三個問題。
語法：clear : none | left | right | both
- none：默認值。允許兩邊都可以有浮動對象
- left：不允許左邊有浮動對象
- right：不允許右邊有浮動對象
- both：不允許有浮動對象
清除浮動的應用我們可以直接從上個問題中的文字環繞來解答。在我們沒有清楚浮動時，我們的文字是圍繞著浮動元素，那么我們添加了去除浮動（代碼如下），可以得到如下圖結果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct {
width: 300px;
height: 300px;
border: 2px solid #eee;
}
.box1 {
float: left;
height: 50px;
width: 100px;
background-color: pink;
}
.box2 {
clear: both;
height: 100px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2">
如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在
</div>
</div>
</body>
</html>
<strong>本文版權歸作者和饑人谷所有，轉載請注明出處
