<style>
.d1{
500px;
height: 500px;
margin: 100px auto 0;
background-color: #0052A3;
position: relative;
}
.d2{
300px;
height: 300px;
background-color: rosybrown;
position: absolute;
top: 20px;
left: 0px;
}
.d3{
200px;
height: 150px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
div{
text-align: right;
}
.p2{
margin-top: 200px;
}
</style>
<body>
这是 d3 ==> position: absolute
相对于第一个已定位（非静态的，）的包含它的元素的指定坐标。。
已定位（非静态的，）指的是relative（相对的）absolute（绝对的）或 fixed（固定的）的元素）。
<div class="d1">
这是d1 position: relative;
<div class="d2">
<p class="p2">这是 d2 position: absolute;</p>
<div class="d3">
这是 d3 ==> position: absolute
相对于d2定位！！！！
</div>
</div>
</div>
</body>