如果，說浮動， 關鍵在乙個 「浮」 字上面， 那麼 我們的定位，關鍵在於乙個 「位」 上。
對於定位，最常運用的場景再那裡呢？ 來看幾幅，你一定會有感悟！
第一幅圖， 小黃色塊可以再上移動：
第二幅圖， 左右箭頭壓住：
第三幅圖, hot 在盒子外面多出一塊，更加突出：
以上三個小地方，如果用標準流或者浮動，實現會比較複雜或者難以實現，此時我們用定位來做，就會簡單許多！
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性
描述top
頂端偏移量，定義元素相對於其父元素上邊線的距離
botttom
底部偏移量，定義元素相對於其父元素下邊線的距離
left
左側偏移量，定義元素相對於其父元素左邊線的距離
right
右側偏移量，定義元素相對於其父元素右邊線的距離
也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式
在css中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器position屬性的常用值：值描述
static
靜態定位（預設定位方式）
relative
相對定位，相對於其原文件流的位置進行定位
absolute
絕對定位，相對於其上乙個已經定位的父元素進行定位
fixed
固定定位，相對於瀏覽器視窗進行定位
靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。
上面的話翻譯成白話： 就是網頁中所有元素都預設的是靜態定位哦！ 其實就是標準流的特性。
在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
ps： 靜態定位其實沒啥可說的。
小笑話：
剛剛看到乙個超級超級帥的帥哥，看得我都忍不住想和他搞基了。
世間怎會有如此之完美的男人。我和他就這樣一動不動的對視著，就彷彿一見鐘情。
時間也在這一瞬間停止了。直到我的手麻了。才戀戀不捨的放下鏡子。。。。
對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位置仍然保留。如下圖所示，即是乙個相對定位的效果展示：
注意：相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續占有。
就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。
小笑話：
吃早飯時，老婆往兒子碗裡放了兩個煎蛋，兒子全給了我，
還一本正經地說：「爸爸，多吃點，男人養家不容易。」
我一陣感動，剛想誇他兩句。
兒子接著說：「以後全靠你讓我拼爹了！」
當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。
注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。
父級元素沒有定位
若所有父元素都沒有定位，以瀏覽器為準對齊(document文件)。
父級元素有定位
絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
絕對定位的盒子沒有邊偏移
如果只是給盒子指定了 定位，但是沒有給與邊偏移，則該盒子以標準流來顯示排序，和上乙個盒子的底邊對齊，但是不占有位置。實際上給定絕對定位的盒子已經脫離標準流了，如果03下再有乙個盒子04，04就會上移佔據03原來的位置。
子絕父相
這個「子絕父相」太重要了，是我們學習定位的口訣，時時刻刻記住的。
這句話的意思是 子級是絕對定位的話， 父級要用相對定位。
首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。
就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相，子絕父固都是正確的。
子絕父相的由來：
因為子級是絕對定位，不會占有位置，可以放到父盒子裡面的任何乙個地方。
父盒子布局時，需要占有位置，因此父親只能是相對定位. 這就是子絕父相的由來
固定定位是絕對定位的一種特殊形式，它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。
當對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。
固定定位的特點：
固定定位的元素跟父親沒有任何關係，只認瀏覽器。
固定定位完全脫標，不占有位置，不隨著滾動條滾動。
記憶法： 就類似於孫猴子， 無父無母，好不容易找到乙個可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。
注意：ie6等低版本瀏覽器不支援固定定位。
當對多個元素同時設定定位時，定位元素之間有可能會發生重疊。
在css中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。
比如： z-index: 2;
注意：z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
定位模式
是否脫標占有位置
是否可以使用邊偏移
移動位置基準
靜態定位 static
不脫標，正常模式
不可以正常模式
相對定位 relative
不脫標，占有位置
可以相對自身位置移動
絕對定位 absolute
完全脫標，不占有位置
可以相對於定位父級移動位置
固定定位 fixed
完全脫標，不占有位置
可以相對於瀏覽器移動位置
跟浮動一樣，元素新增了 絕對定位和固定定位之後，元素模式也會發生轉換，都轉換為 行內塊模式，因此 比如 行內元素 如果新增了 絕對定位或者固定定位後，可以不用轉換模式，直接給高度和寬度就可以了。
CSS常用知識點
一 浮動框可以向左或向右移動，直到外邊緣碰到包含框或另乙個浮動框邊框為止。常用浮動 float left 向左 float right 向右 加上浮動之後 還要清除浮動 cl after 二 2.1 定位 難點 position static 沒有定位 fixed 絕對定位，相對瀏覽器始終顯示 相對...
CSS知識點總結
css匯入方式 1.標籤內聯2.內部放置3.外部放置4.import url css選擇器 1.標籤選擇器2.id選擇器3.class選擇器4.組合選擇器 css優先順序 就近原則 標籤 id class 為了防止不支援css的瀏覽器將.標籤間的css規則當成普通字串,而顯示在網頁上，應將css的規...
CSS知識點總結
1 內聯樣式 行內樣式 將樣式宣告在元素的style屬性中 2.內部樣式 將樣式宣告定義在頁面的style屬性中 3.外部樣式表 步驟 建立乙個新的css檔案 建立和html檔案的關聯 css樣式表的特徵 繼承性 1 子級元素可以直接使用父級元素宣告好的樣式 這裡不是所有的樣式都可以被繼承 層疊性 ...