1.相對定位
position:relative;
<html>
<head>
<!--參考http://web.jobbole.com/84938/-->
<meta charset="utf-8" />
<title></title>
<style>
html, body, #father-body {
height: 100%;
width: 100%;
background-color: #123456;
}
.item1, .item2, .item3 {
width: 300px;
height: 100px;
background-color: #234567;
margin: 20px;
}
.item2 {
position: relative;
/*top:80px;*/
/*left:80px;*/
/*margin: 80px 0 0 80px;*/
}
</style>
</head>
<body>
<div class="father-body">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</div>
</body>
</html>
效果如圖：
屏幕快照 2017-09-29 下午4.41.35.png
當使用margin: 80px 0 0 80px時
屏幕快照 2017-09-29 下午4.43.47.png
使用margin 這樣的屬性改變元素的位置會影響其他元素的位置，item3與item2上下間距不變，item3的縱坐標y增加了60
當使用top:80px; left:80px;
屏幕快照 2017-09-29 下午4.48.58.png
使用top right bottom left ，這樣屬性改變元素的位置的時候，不會影響其他元素的位置。
item2與item3重合了，item3的縱坐標y不變。
絕對定位
position:absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin:20px;
height: 100%;
width: 100%;
background-color: #123456;
}
#body-div{
padding:15px;
width: 60%;
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>
屏幕快照 2017-09-29 下午5.01.08.png
為Box-2設置絕對定位屬性
.item2{
position:absolute;
}
屏幕快照 2017-09-29 下午5.02.34.png
這個時候Box-3的位置會占據之前Box-2的位置。且Box-2和Box-3的左邊框會重合。且盒子的寬度會根據盒子內部的元素自適應。
當盒子設置了絕對定位但是沒有使用top right bottom left設置盒子的偏移量的時候，它仍會占據原先的位置。
那么當設置top right bottom left這些屬性時
設置下面的代碼：
.item2{
position:absolute;
top:0;
right:0;
}
屏幕快照 2017-09-29 下午5.05.37.png
當我們把直接父級元素設置為已定位的元素
#body-div{
padding:15px;
width: 60%;
background-color:#a0c8ff;
border:1px solid #000000;
position: absolute;
}
屏幕快照 2017-09-29 下午5.10.40.png
由上可以得出兩個結論：
1.使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行偏移（定位）。如果沒有已經定位的祖先元素，那么就會以瀏覽器窗口為基準進行定位。
2.決對定位的框從標準流中脫離，這意味著它們對其后的兄弟盒子的定位沒有影響。其它的盒子好像就當這個盒子（絕對定位的盒子）不存在一樣。
參考鏈接：http://blog.csdn.net/yisuowushinian/article/details/46038423
