引子：
開始的時候我想先要解決一個問題，怎麼設定一個div盒子撐滿整個螢幕？
看下面的html代碼：
<body>
<div id="father-body">
<div class="item1"></div>
</div>
</body>
實作方法一：
html, body,#father-body{
height:%;
width:%;
background-color:#123456;
}
這裡主要解釋下
%
(百分号)在CSS中使用的問題。
%
主要是在父級元素或者是祖先元素定義了固定的
width
和
height
的時候才可以使用（或者說使用的時候才會有效果）。
實作方法二：
#father-body{
position:fixed;
width:%;
height:%;
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:px;
height:px;
background-color:#123456;
margin:px;
}
.item2{
position:relative;
/*top:40px;
left:40px;*/
margin:px px;
}
</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:px;
height:px;
background-color:#123456;
margin:px;
}
.item2{
position:relative;
top:px;
left:px;
/*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:px;}
#body-div{
padding:px;
background-color:#a0c8ff;
border:px solid #000000;
}
#body-div div{
padding:px;
background-color:#fff0ac;
border:px 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:;
right:;
}
效果如下圖：
那麼當我們把直接父級元素設定為已定位的元素會怎麼樣呢？
由上可以得出兩個結論：
1.使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行偏移（定位）。如果沒有已經定位的祖先元素，那麼就會以浏覽器視窗為基準進行定位。
2.決對定位的框從标準流中脫離，這意味着它們對其後的兄弟盒子的定位沒有影響。其它的盒子好像就當這個盒子（絕對定位的盒子）不存在一樣。
3.z-index屬性
z-index屬性用于調整定位時重疊塊的上下位置，與它的名稱一樣，如果頁面為x-y軸，則垂直于頁面的方向為z軸。z-index大的頁面位于其值小的的上面。
看下面的代碼：
.item1{
position:relative;
z-index:;
}
.item2{
position:absolute;
top:;
right:;
z-index:;
}
常見定位拓展：
以下的代碼我都親測過，均可以達到效果，就不在展示效果圖（如果對代碼有疑問可以留言）：
1.水準居中
1.1行内元素的水準居中
/*行内元素水準居中*/
#body-div{
text-align:center;
}
1.2塊級元素的水準居中
/*塊級元素水準居中*/
#body-div{
margin: 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:px;
height:px;
position:absolute;
top:%;
left:%;
margin:-px -px;
}
2.2未知寬度高度的垂直水準居中
/*未知高度和寬度的水準垂直居中*/
#body-div{
position:relative;
}
##body-div-container{
position:absolute;
margin:auto;
top:;
right:;
bottom:;
left:;
}
2.3當被居中的元素是 inline
inline-block
inline
inline-block
#body-div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
##body-div-container{
}