開始的時候我想先要解決一個問題，怎麼設定一個div盒子撐滿整個螢幕。
看下面的html代碼：
<body> <div id="father-body"> <div class="item1"></div> </div></body>
實現方法一：
html, body,#father-body{ height:100%; width:100%; background-color:#123456; }
這裡主要解釋下%(百分比符號)在CSS中使用的問題。% 主要是在父級元素或者是祖先元素定義了固定的width 和height 的時候才可以使用（或者說使用的時候才會有效果）。
實現方法二：
#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }
這裡為#father-body 設定position屬性，觸發自身的BFC。當對自身使用width 和 height的時候才可以生效。
position的fixed值的含義：
對象脫離常規流，使用 top，right，bottom，left等屬性以視窗為參考點進行定位，當出現捲軸時，對象不會隨著滾動。 position屬性的幾個值的概念：
1.相對定位
有了以上的定義，來看一段代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style></head><body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div></body></html>
效果如下圖：
當我們使用top right bottom left 這樣的屬性的時候，CSS代碼如下：
<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>
可以看到的效果圖如下圖：
到這裡可以驗證當使用top right bottom left （這四個屬性可以設定具體的像素數也可以設定百分比）這樣屬性改變元素的位置的時候，不會影響其他元素的位置。而使用margin 這樣的屬性改變元素的位置會影響其他元素的位置。
示意圖如下（圖片來自W3CSchool）：
2.絕對位置
看下面的一段代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style></head><body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </div></body></html>
效果圖如下：
我們為Box-2設定絕對位置屬性
.item2{ position:absolute; }
此時Box-2脫離文檔流，效果如下：
這個時候Box-3的位置會佔據之前Box-2的位置。且Box-2和Box-3的左邊框會重合。且盒子的寬度會根據盒子內部的元素自適應。
當盒子設定了絕對位置但是沒有使用top right bottom left設定盒子的位移量的時候，它仍會佔據原先的位置。
那麼當設定top right bottom left這些屬性的時候會是什麼效果呢。
設定下面的代碼：
.item2{ position:absolute; top:0; right:0; }
效果如下圖：
那麼當我們把直接父級元素設定為已定位的元素會怎麼樣呢。
由上可以得出兩個結論：
1.使用絕對位置的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行位移（定位）。如果沒有已經定位的祖先元素，那麼就會以瀏覽器視窗為基準進行定位。
2.決對定位的框從標準流中脫離，這意味著它們對其後的兄弟盒子的定位沒有影響。其它的盒子好像就當這個盒子（絕對位置的盒子）不存在一樣。 3.z-index屬性
z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱一樣，如果頁面為x-y軸，則垂直於頁面的方向為z軸。z-index大的頁面位於其值小的的上面。
看下面的代碼：
.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }
常見定位拓展：
以下的代碼我都親測過，均可以達到效果，就不在展示效果圖（如果對代碼有疑問可以留言）： 1.水平置中 1.1行內元素的水平置中
/*行內元素水平置中*/ #body-div{ text-align:center; }
1.2區塊層級元素的水平置中
/*區塊層級元素水平置中*/ #body-div{ margin:0 auto; }
1.3多個區塊層級元素水平置中
/*多個區塊層級元素水平置中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; }
2.水平垂直置中
2.1已知寬度高度的垂直水平置中
/*已知高度和寬度的水平垂直置中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }
2.2未知寬度高度的垂直水平置中
/*未知高度和寬度的水平垂直置中*/ #body-div{ position:relative; } ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; }
2.3當被置中的元素是inline或者是inline-block
#body-div{ display:table-cell; text-align:center; vertical-align:middle; } ##body-div-container{ }Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
