在沒有使用任何定位和浮動情況下，html中塊元素從上到下排布（每個塊獨佔一行，自帶換行），內聯元素從左到右排布。
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大部分元素都是不可替換元素），則要指定乙個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
不脫標元素：靜態定位的元素和相對定位元素佔在標準流中的空間（相對定位元素在）。
是否在標準流中
能否使用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
不佔空間
緊鄰最近不脫標的元素
/
CSS定位學習筆記
僅僅是自己對著w3cschool整理的一些 css 基礎知識點，敲一遍加深下印象也方便以後複習。一切皆為框 與之相反，span 和strong 等元素稱為行內元素，這意味著他們的內容顯示在行內，即 行內框 some text some more text.在這種情況下，這個框稱為無名塊框，因為它不與...
CSS學習篇核心之 定位
關於css 樣式的進一步學習，我們今天主要學習下 css的定位知識，定位就是定義我們的元素框由原來的位置在移動後所處的位置。關於定位有三種相對定位 絕對定位和浮動。相對定位相對來說是比較簡單的，如果對乙個元素進行相對定位，它首先出現在其初始位置，然後可以設定它垂直貨水平位置，讓這個元素 相對於 它的...
CSS學習篇核心之 定位
關於css 樣式的進一步學習，我們今天主要學習下 css的定位知識，定位就是定義我們的元素框由原來的位置在移動後所處的位置。關於定位有三種相對定位 絕對定位和浮動。相對定位相對來說是比較簡單的，如果對乙個元素進行相對定位，它首先出現在其初始位置，然後可以設定它垂直貨水平位置，讓這個元素 相對於 它的...