CSS定位深刻理解 徹底掌握CSS定位 相對定位和絕對定位

其實前面的標準流和浮動流都很理解，就是定位不太好理解，特別是相對定位和絕對定位，不少剛開始學的同窗很差區分。所以這裏，小強老師和你們一塊兒分享CSS定位的學習。

經過咱們前面的學習，咱們網頁佈局方法：

  1. 標準流   （最穩定）

  2. 浮動流   （float 其次）

  3. 定位流    ( 穩定性最後)

定位是徹底脫離標準流的一種佈局方式。

其實前面的標準流和浮動流都很理解，就是定位不太好理解，特別是相對定位和絕對定位，不少剛開始學的同窗很差區分。所以這裏，小強老師和你們一塊兒分享CSS定位的學習。

咱們知道，定位都是和方位名詞一塊兒使用的，調整位置，大部分使用top,left,bottom,right配合使用的。

首先咱們看看定位的分類：

1.絕對定位 absolute 

position：absolute；

絕對定位和相對定位用的相對來講，是比較多的地方。絕對定位到底有什麼特色，在這裏小強老師，給你們總結一下。

1.若是定位沒有父盒子

      那麼這個盒子，加上絕對定位後，都是以瀏覽器的左上角爲原點，全部的移動，也是以該原點來移動的。

   案例如圖：



預覽後


  

2.若是有父盒子，可是父盒子，沒有定位，那麼，結果不會變，這個盒子仍是會以瀏覽器的左上角爲原點。

預覽後

3.若是有父盒子，而且父盒子有定位，那麼此時，絕對定位會以父盒子的左上角爲原點，對齊。

如圖：



生成效果：

  4. 絕對定位有個很重要的特色，就不佔位置，徹底脫離標準流，因此它會升起來，它的後側會有標準流佔據。

2.相對定位 (relative)

  position:relative
  
 相對定位簡單，無論有沒有父盒子，它都是以自身的左上角爲原點。

  還有，它是佔位置的，就是還有其餘盒子，會排在的下方。

3. 固定定位

position：fixed

 固定定位也是相對於瀏覽器來講的，他是固定再瀏覽器的某個位置。 （ie6不支持固定定位，只能另外解決）

 固定定位，也不佔位置，徹底脫離標準流。

4. 靜態定位

position:static

他幾乎和標準流同樣，沒有特殊定位，而且是佔位置的。

5.疊放次序：

z-index: 數值;
數值越大  盒子越靠上  須要注意：數值後面必定不能加單位.
.one{z-index:10;}
 
總結：

定位來講,佔位置的有 static 靜態定位和relative相對定位，不佔位置的有 absolute絕對定位和fixed固定定位。這個很重要，對咱們佈局標準流，有很大的影響。
咱們必定要記住的口訣就是，子級絕對，父級相對。 這樣對咱們佈局來講，是最合適的佈局理念。