##CSS 定位機制##
CSS 有三種基本的定位機制：普通流、浮動流和定位流。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
##什么是CSS 定位 (Position) ？##
屬性允許你檢索和設置對象的定位方式
CSS 為定位提供了一些屬性值，可以將布局的一部分與另一部分重疊。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。
##CSS 定位都有哪幾種以及之間的區別 ？##
1、static 默認值
相當於普通流；沒有定位；
作用：可以用於取消元素之前的定位設置
2、relative 相對定位
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
參照物：自己所在的位置
特點：
a：如果沒有定位偏移量，對於元素本身沒有任何影響
b：不使元素脫離文檔流，空間是會被保留的
c：不影響其他元素布局
d：left，top，right，bottom是相對於當前自身進行便宜的，不能獨立存在，必須配合定位使用
3、absolute 絕對定位
元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
參照物：
a：可視窗口：瀏覽器第一屏（默認情況下）
b：有設置定位的最近父元素
特點：
a：使元素完全脫離文檔流
b：使內聯元素支持寬高（讓內聯元素具備塊特性）
c：使塊元素默認寬根據內容決定（讓塊具備內聯的特性）
d：如果有定位祖先元素相對於定位祖先元素發生偏移，沒有定位祖先元素相對於整個文檔發生偏移（絕對、相對、固定）
注：如果祖先元素中有多個元素具備定位模式，那么是已離自己最近的祖先元素進行偏移。
案例：圖片上疊加說明文字
<div class="father"> <img src="pic.jpg" /> <div class="son">圖片上的文字說明</div> </div>
.father{ positon: relative; } .son { position: absolute; bottom：0px; left:0px; width:100%; background:rgba(0,0,0,0.5); color:#ffffff; }
案例效果：
4、fixed 固定定位
元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。
參照物：
a：始終都是相對於整個瀏覽器窗口進行固定定位
特點：
a：使文檔完全脫離文檔流
b：使內聯元素支持寬高（讓內聯具備內聯塊的特性）
c：使塊元素默認寬根據內二公決定（讓塊具備內聯塊的特性）
d：相對於整個瀏覽器窗口進行偏移，不受瀏覽器滾動條的影響，不會受到祖先元素的影響。
案例：點擊出現彈，位置水平垂直居中且固定不動
<div class="popup"> <div class="pop_body">...</div> </div>
.popup{ width:300px; height:400px position: fixed; left:50%; top:50% margin-left:-150px; margin-top:-200px; }
案例效果：
5、粘性定位 position：sticky；（css3新增屬性，兼容性比較差）
這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。
參照物：
a：在固定的時候：參照物是相對於整個瀏覽器窗口
特點：
a：相對定位和固定定位的結合體；
b：在沒有到達指定位置的時候，是沒有定位效果的（相當於相對定位）；在到達設定的位置的時候 是固定定位；
c：在固定的時候：參照物是相對於整個瀏覽器窗口
生效規則：
position:sticky 的生效是有一定的限制的，總結如下：
a、須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
b、設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：
· 如果 position:sticky 元素的任意父節點定位設置為 overflow:hidden，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。
· 如果 position:sticky 元素的任意父節點定位設置為 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。
c、達到設定的閥值。這個還算好理解，也就是設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。
案例：實現導航的吸頂效果（頭部導航條固定）
#toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 100px; }
案例效果：（初始效果）
案例效果：（滑動之后效果）
##定位的作用##
a、在正常情況下，可以讓一個元素覆蓋在另外一個元素上面
b、可以移動一個元素的位置
c、可以固定某個容器在瀏覽器窗口的某個位置不動。
d、可以做吸頂效果，比如百度新聞的導航
##相對定位和絕對定位的區別##
a、 相對定位的參照物是自己本身所在的位置，
絕對定位的參照物是包含塊
b、 相對定位是不會脫離文檔流的，而且不對頁面布局產生影響；
絕對定位是會脫離文檔流的，原來的位置不在占有，后面的內容會把位置補上去
##絕對定位和固定定位之間的相同點和不同點##
相同點：
都會脫離文檔流，並且都定位之后，結構在后面的元素會覆蓋在最上面，都可以通過z-index來改變層疊順序，也可以都用left top right bottom移動位置
不同點：
a、參照物不同
絕對定位的參照物有2個，A是瀏覽器的第一屏 B就是有定位的父元素
固定定位的參照物只有1個，是瀏覽器的當前窗口。
b、固定定位之后該元素就固定在某個位置了，拖動窗口的時候，不再改變
##層疊順序z-index##
檢索或設置對象的層疊順序
注：他只針對於定位屬性的元素起作用
a：auto 自動，默認的
b：number 數值越大，層越上
沒有設置z-index時，最后寫的對象優先級先顯示在上層，設置之后，數值越大，層越上
##包含塊的概念##
a、包含塊是絕對定位的基礎，包含塊就是為定位元素提供坐標，偏移和顯示范圍的參照 物，即確定絕對定位的偏移起點和百分比 長度的參考；
b、絕對定位元素會根據包含塊進行絕對定位，
默認情況下 ，瀏覽器的可視窗口是一個大的包含塊，
默認情況下，絕對定位元素會相對瀏覽器的可視窗口進行定位；
如果他的祖先級元素定義了包含塊，那他就最近的祖先級元素進行絕對定位。
c、怎么給他的祖先級元素定義成包含塊： 給祖先級元素添加position：relative/absolute/fixed。