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
