CSS定位深入理解 完全掌握CSS定位 相對定位和絕對位置

標籤：style   http   使用   os   io   ar   amp   new   

其實前面的標準流和浮動流都很理解，就是定位不太好理解，特別是相對定位和絕對位置，很多剛開始學的同學不好區分。因此這裡，小強老師和大家一起分享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固定定位。這個很重要，對我們布局標準流，有很大的影響。
我們一定要記住的口訣就是，子級絕對，父級相對。 這樣對我們布局來說，是最合適的布局理念。