如果，說浮動， 關鍵在乙個 「浮」 字上面， 那麼 我們的定位，關鍵在於乙個 「位」 上。
css離不開定位，特別是js特效，天天和定位打交道。
那麼定位，最常運用的場景再那裡呢？
小黃色塊可以再上移動
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性
描述top
頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom
底部偏移量，定義元素相對於其父元素下邊線的距離
left
左側偏移量，定義元素相對於其父元素左邊線的距離
right
右側偏移量，定義元素相對於其父元素右邊線的距離
也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在css中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器position屬性的常用值值描述
static
自動定位（預設定位方式）
relative
相對定位，相對於其原文件流的位置進行定位
absolute
絕對定位，相對於其上乙個已經定位的父元素進行定位
fixed
固定定位，相對於瀏覽器視窗進行定位
靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。
上面的話翻譯成白話： 就是網頁中所有元素都預設的是靜態定位哦！ 其實就是標準流的特性。
在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
ps： 靜態定位其實沒啥可說的。
相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。
對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位置仍然保留。
注意：相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續占有。
其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）
就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）
如果說浮動的主要目的是 讓多個塊級元素一行顯示，那麼定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去。
[注意] 如果文件可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的某一部分定位。
當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。
注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。
這個「子絕父相」太重要了，是我們學習定位的口訣，時時刻刻記住的。
這句話的意思是 子級是絕對定位的話， 父級要用相對定位。
因為子級是絕對定位，不會占有位置， 可以放到父盒子裡面的任何乙個地方。
父盒子布局時，需要占有位置，因此父親只能是 相對定位.
這就是子絕父相的由來。
固定定位是絕對定位的一種特殊形式，類似於 正方形是乙個特殊的 矩形。它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。
當對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。
固定定位有兩點：
固定定位的元素跟父親沒有任何關係，只認瀏覽器。
固定定位完全脫標，不占有位置，不隨著滾動條滾動。
ie6等低版本瀏覽器不支援固定定位。
在css中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。
比如： z-index: 2;
注意：z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
定位模式
是否脫標占有位置
是否可以使用邊偏移
移動位置基準
靜態static
不脫標，正常模式
不可以正常模式
相對定位relative
不脫標，占有位置
可以相對自身位置移動（自戀型）
絕對定位absolute
完全脫標，不占有位置
可以相對於定位父級移動位置（拼爹型）
固定定位fixed
完全脫標，不占有位置
可以相對於瀏覽器移動位置（認死理型）
跟 浮動一樣， 元素新增了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換為 行內塊模式，
因此 比如 行內元素 如果新增了 絕對定位或者 固定定位後 浮動後，可以不用轉換模式，直接給高度和寬度就可以了。
CSS學習之定位
設定為相對定位 relative 的元素會偏移某個距離，元素仍保持其未定位前的形狀，他原本所佔的空間仍然保留 相對定位是乙個非常容易掌握的概念，如果對乙個元素進行相對定位，它將出現在它所在的位置上 然後可以通過設定垂直或者水平位置讓這個元素相對於它的起點進行移動。如果將top 設定為20px，那麼框...
CSS學習之position定位
定位在css中可謂是布局的常用手段，配合浮動能使網頁布局更加的靈活多變，今天跟大家一起分享下學習定位的一點小結 css中預設不開啟定位，其元素的position屬性預設值為static。若想要元素定位，則需手動開啟定位，即設定position的屬性值可選為 relative，absolute，fix...
HTML學習之CSS定位
css可以使用屬性position來實現定位 屬性值作用 具體說明 relative 相對定位 相對元素自己原有位置移動指定的距離，可以使用top left right bottom進行設定，其他元素的位置不會隨之改變 absolute 絕對定位 可以使元素參照介面或者相對父元素進行移動，可以使用t...