<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
position: absolute;
相配合使用的属性分别有：
定位属性：left、right、top、bottom
堆叠顺序属性：z-index
定位属性是用来定位元素的位置的，四个方向可以设置位置；
堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。
参照浏览器左上角，配合 top left right bottom（TLRB）进行定位，
1、在没有设定TLRB,默认依据父级的坐标原点为起始点
2、如果设定了TLRB,并且父级没有设定position属性，
那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定
3、如果设定了TLRB,并且父级设定position属性，
那么当前的absolute则以父级元素的左上角为原始点进行定位，位置将由TRBL决定
如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。
如果设定了TRLB，父级元素有定义position属性，则absolute的（0,0）位置在父级元素的左上角位置，位置由定位属性(TLRB)决定；
如果设定了TRLB，父级元素没有定义position属性，则absolute的（0,0）位置在浏览器的右上角位置，位置由定位属性(TLRB)决定。
所以谁absolute有随机性的，大多是因为没有注意到父级元素是否也定义过position属性
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/
#parent{
position: absolute;
height: 200px;
width:200px;
border: 4px solid red;
background-color: #4cae4c;
margin-top:100px;
margin-left:100px;
}
#children{
position: absolute;
height: 20px;
width: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'>
<div id="children">
</div>
</div>
</body>
</html>