CSS定位(Positioning)

含義：

• CSS定位屬性允許你對元素進行定位
• 定位的基本思想，它允許你定義元素框相對於其他正常位置該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置
• position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素
• 可以使用position屬性把一個元素放置到網頁中的任何位置

CSS position屬性

通過使用position屬性，我們可以選擇四種不同型別的定位，這回影響元素框生成的方式。
position屬性值的含義：

• static

預設值，元素沒有開啟定位
元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中

• relative

開啟元素相對定位
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留

• absolute

開啟元素絕對定位
元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框
-fixed
元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身

相對定位

• 設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
• 每個元素在頁面的文件流中都有一個自然位置。相對於這個位置對元素進行移動就稱為相對定位。周圍的元素完全不受此影響
• 當將position屬性設定為relative時，則開啟了元素 的相對定位
• 當開啟了相對定位以後，可以使用top、right、bottom、left四個屬性對元素進行定位
• 通常偏移量之需要使用兩個就可以對一個元素進行定位，一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位

注:在使用相對定位時，無論是否進行移動，元素任然佔據原來的空間。因此，移動元素會導致它覆蓋其他框

例：如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

相對定位.png

相對定位特點

• 如果不設定元素偏移量，元素位置不會發生變化
• 相對定位是相對於元素在文件流中原來的位置進行定位
• 相對定位不會使元素脫離文字流。元素在文字流中的位置不會改變
• 相對定位不會改變元素原來的特性，塊還是塊，內聯還是內聯
• 相對定位會使元素的層級提升，使元素可以覆蓋文字流中的元素

絕對定位

• 設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另一個元素或者初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框
• 絕對定位使元素的位置與文件流無關因此不佔據空間，這一點與相對定位不同，相對定位實際上被看做普通流定位模型的一部分，因此元素的位置相對於它在普通流中的位置
• 絕對定位指使元素相對於html元素或離他最近 的祖先定位元素進行定位。
• 當將position屬性設定為absolute時，則開啟 了元素的絕對定位。
• 當開啟了絕對定位以後，可以使用top、right、 bottom、left四個屬性對元素進行定位

#box_relative{
   position:absolute;
   left:30px;
   top:20px
}

絕對定位.png

• 絕對定位的元素的位置相對於最近的已定位祖先元素，如果沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊
  註釋:根據使用者代理的不同，最初的包含塊可能是畫布或HTML元素
  提示:因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素。通過設定z-index屬性來控制這些框的堆放次序

對於定位的主要問題是要記住每種定位的意義。所以，相對定位使‘相對於’元素在文件中的初始位置，而絕對定位使‘相對於’最近的已定位祖先元素，如果不存在已定位祖先元素，那麼‘相對於’最初的包含塊。

絕對定位的特點

• 絕對定位會使元素完全脫離文字流
• 絕對定位的塊元素的寬度會被其內容撐開
• 絕對定位會使行內元素變成塊元素
• 一般使用絕對定位時會同時為其父元素指定一個相對定位，以確保元素可以相對於父元素進行定位

固定定位

• 固定定位的元素會被鎖定在螢幕的某個位置上，當訪問者滾動網頁時，固定元素會在螢幕上保持不動。會固定在瀏覽器視窗某個位置，不會隨滾動條滾動
• 當將position屬性設定為fixed時，則開啟了元素的固定定位。
• 當開啟了固定定位以後，可以使用top、right、bottom、left四個屬性對元素進行定位。
• 固定定位的其他特性和絕對定位類似。
• IE6不支援固定定位

z-index

• 當元素開啟定位以後就可以設定z-index這個屬性。
  這個屬性可以提升定位元素所在的層級。
• z-index可以指定一個整數作為引數，值越 大元素顯示的優先順序越高，也就是z-index 值較大的元素會顯示在網頁的最上層。