【從0到1學Web前端】CSS定位問題三(相對定位,絕對定位)
引子：
開始的時候我想先要解決一個問題，怎麼設定一個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" 效果如下圖：
當我們使用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>可以看到的效果圖如下圖：
到這裡可以驗證當使用
toprightbottomleft（這四個屬性可以設定具體的畫素數也可以設定百分比）這樣屬性改變元素的位置的時候，不會影響其他元素的位置。而使用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的左邊框會重合。且盒子的寬度會根據盒子內部的元素自適應。
當盒子設定了絕對定位但是沒有使用
toprightbottomleft設定盒子的偏移量的時候，它仍會佔據原先的位置。
那麼當設定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{
}