目錄

• 元素顯示模式
  • 元素模式
  • 元素顯示模式轉換
• CSS定位機制
• 靜態定位static
• 相對定位relative
• 絕對定位absolute
• 固定定位fixed
• 粘性定位sticky
• 定位小結一圖流

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

元素顯示模式

元素模式

常見塊級元素有<h1>~<h6> <p> <div> <ul> <ol> <li> 等，其實<div> 標籤是最經典的塊級元素。常見的行內元素<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等，其中<span> 標籤是最典型的行內元素，行內元素有時也被稱作內聯元素

元素顯示模式轉換

特殊情況下，我們需要元素模式的轉化，簡單理解：一個模式的元素需要另一種模式的特性，比如想要增加連結<a>的觸發範圍等。

• 轉化為塊元素：display：block
• 轉換為行內元素：display：inline
• 轉換為行內塊元素：display：inline-block

CSS定位機制

所謂定位，實際上就是將盒子定在某一個位置，按照定位的方式擺放盒子。定位=定位模式 + 邊偏移，定位模式用於指定一個元素在文件中的定位方式，邊偏移則決定了該元素的最終位置。

可以利用 position

• static 靜態定位
• relative 相對定位
• fixed 固定定位
• absolute 絕對定位
• sticky 粘性定位

邊偏移由以下4個屬性定義:

• top
• left
• right
• buttom

靜態定位static

static是position的預設值，如果省略position屬性，則瀏覽器預設該元素為靜態定位。所謂靜態定位即瀏覽器按照原始碼的順序，決定每個元素的位置，這稱為正常的頁面流。每個塊級元素佔據自己的區塊，元素與元素之間不產生重疊，這個位置就是元素的預設位置。

相對定位relative

如果對一個元素進行相對定位，它將出現在它所在的位置（原靜態定位的位置）上。然後，可以通過設定邊偏移來讓該元素相對於它的起點進行移動。

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

在使用相對定位時，無論是否相對於原來的起點進行移動，元素仍佔據原來的空間，因此移動的元素可能會覆蓋其他元素，同時其他元素不會佔據元素原來的空間。

絕對定位absolute

絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。

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

普通流中的其他元素在佈局時會將絕對定位的元素當作不存在一樣對待。

絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（例如以瀏覽器為標準）。

固定定位fixed

固定定位的元素的位置相對於瀏覽器是固定的，即不隨著瀏覽器頁面的滾動而改變位置，若瀏覽器頁面大小發生改變，該元素相對於瀏覽器的位置不變，固定定位可以看作是特殊的絕對定位。同時，固定定位不佔有原來的位置。

#box_fixed {
  position: fixed;
  left: 30px;
  top: 20px;
}

粘性定位sticky

粘性定位很像是固定定位fixed和相對定位relative的結合，粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換。

• 當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
• 當頁面滾動未超出目標區域時，它的表現和普通的postition:relative一樣。

利用粘性定位可以實現很多效果，例如很多網頁的側欄。

tip : Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix (檢視以下例項)。

定位小結一圖流