<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
position:relative;
绝对相对定位，他是参照父级的原始点为原始点。
无父级则以BODY的原始点为原始点，配合TRBL进行定位.
当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。*/
#parent{
height: 200px;
200px;
border: 4px solid red;
background-color: #4cae4c;
margin-top:100px;
margin-left:100px;
}
#children{
position: relative;
height: 20px;
60px;
border: 4px solid blue;
background-color: #761c19;
top:10px;
left: 50px;
}
</style>
</head>
<body style="margin: 0;padding: 0;background-color: gray">
<div id = 'parent'>aaaaaaaaaaaa
<div id="children">
bbbb
</div>
</div>
</body>
</html>