CSS學習筆記——傳統定位篇

1. 標準流（文件流）

在沒有使用任何定位和浮動情況下，Html中塊元素從上到下排布（每個塊獨佔一行，自帶換行），內聯元素從左到右排布。

2.幾種常見定位

1、靜態定位（static）
一般的標籤元素不加任何定位屬性都屬於靜態定位，在頁面的最底層屬於標準流。

 靜態定位的元素不會受到 top, bottom, left, right影響。

2、絕對定位（absolute）
absolute表示，相對於上級元素（一般是父元素）進行偏移，即定位基點是父元素。

它有一個重要的限制條件：定位基點（一般是父元素）不能是static定位，否則定位基點就會變成整個網頁的根元素html。

另外，absolute定位也必須搭配top、bottom、left、right這四個屬性來定位。

3、相對定位（relative） 
relative表示，相對於預設位置（即static時的位置）進行偏移，即定位基點是元素的預設位置。

它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。

4、固定定位（fixed)
fixed表示，相對於視口（viewport，瀏覽器視窗）進行偏移，即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。

5、粘性定位（sticky）
sticky跟前面四個屬性值都不一樣，它會產生動態效果，很像relative和fixed的結合：一些時候是relative定位（定位基點是自身預設位置），另一些時候自動變成fixed定位（定位基點是視口）。

sticky生效的前提是，必須搭配top、bottom、left、right這四個屬性一起使用，不能省略，否則等同於relative定位，不產生"動態固定"的效果。

6、浮動定位（float）

float 屬性定義元素在哪個方向浮動，在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素（html大部分元素都是不可替換元素），則要指定一個明確的寬度；否則，它們會盡可能地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

3、對比：（精華！！！！要理解透！！）

不脫標元素：靜態定位的元素和相對定位元素佔在標準流中的空間（相對定位元素在）。

	是否在標準流中	能否使用top、bottom、left、right	是否還佔標準流的空間	在未使用top等定位下元素的位置變化	top、bottom、left、right定位的基點（參照點）
靜態定位（static）	在標準流中	不能使用top、bottom、left、right	佔空間	預設標準流位置	/
絕對定位（absolute）	脫離標準流	必須使用top、bottom、left、right	不佔空間	緊鄰最近不脫標的元素	父元素不是stastic就為父元素否則就是html根元素
相對定位（relative）	在標準流中	必須使用top、bottom、left、right	佔空間	緊鄰最近不脫標的元素	基點為最近不脫標的元素位置
固定定位（fixed)	脫離標準流	可以使用top、bottom、left、right	不佔空間	緊鄰最近不脫標的元素	基點是瀏覽器視窗
浮動定位（float）	脫離標準流	不能使用top、bottom、left、right	不佔空間	緊鄰最近不脫標的元素	/