1.绝对定位：当位置改变，该位置的坐标原点就会被释放，
后续的其他标签就可以占用该位置
<style>
.div1{
height: 200px;
width: 200px;
background-color:grey;
position: absolute;
/*absolute表示绝对定位*/
top: 200px;
left: 200px;
}
.div2{
height： 200px;
width： 200px；
background-color:burlywood;
position: absolute;
top: 400px;
left:500px;
}
</style>
<body>
<div class="div2">
1
</div>
<div class="div2">
2
</div>
</body>
2.相对定位
相对于原来的位置，当位置发生改变了，
不会释放原来的位置，其他标签不能占用该标签原来的位置
<style>
.div1{
height: 200px;
width: 200px;
background-color:grey;
position: relative;
/*relative表示相对定位*/
top: 200px;
left: 200px;
}
.div2{
height： 200px;
width： 200px；
background-color:burlywood;
}
</style>
<body>
<div class="div2">
1
</div>
<div class="div2">
2
</div>
</body>
3.相对浏览器窗口定位
相对于浏览器的位置，不随页面的移动而移动
（一般可以做页面广告）
<style>
.div1{
height: 200px;
width: 200px;
background-color:grey;
position: fixed;
/*fixed表示相对浏览器窗口定位*/
top: 200px;
left: 200px;
}
.div2{
height： 200px;
width： 200px；
background-color:burlywood;
}
</style>
<body>
<div class="div2">
1
</div>
<div class="div2">
2
</div>
</body>
ps：个人学习笔记，如有错误请大佬指正（doge）