<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>2014年7月28日18:58:03</title>
<style>
.outer-box{
width: 100%;
height: 200px;
border: 10px solid #b26ba2;
/*margin: 0 auto;*/
padding: 1.5em;
box-sizing: border-box;
/*position: absolute;*//*相对于屏幕，不相对于任何盒子*//*
left: 0em;
top: 0em;*/
position: relative;
top: 0;
right: 0;
margin-top: 100px;
}
.outer-box div{
float: left;
height: 100px;
width: 100px;
border: 1px dashed black;
/*margin: 10px;*/
}
.son1{
background: red;
position: relative;
float: right;
/*right: 50px;*//*相对于原位置的right有50px,相对于屏幕是向左移动*//*
bottom: 50px;*//*相对于原位置的bottom有50px,相对于屏幕是向上移动*/
z-index: 100;
}
.son2{
background: #424fff;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="son1">
</div>
<div class="son2">
</div>
<p style="clear:both;"></p>
</div>
</body>
</html>
当父盒子没有相关的定位设置时，他的子盒子的绝对定位则是以屏幕作为父盒子。
所以当想要子盒子以当天父盒子为依靠的时候，父盒子要做定位设置，做相对定位和绝对定位都可以。
相对定位的left或者top值都是相对于自己原先的位置，如果都设置为0，0的话，则相当于没有改变位置。
| 
转播
