相對定位：relative
<html>
<head>
<title>css的定位</title>
<meta charset="UTF-8"/>
<style type="text/css">
#div01{
border:solid 2px orange;
height:300px;
width:800px;
margin-bottom:10px;
margin-top:50px;
/*給父級添加相對定位，就會使子标簽的絕對定位變成父級的*/
position:relative;
}
#showdiv{
border:solid 3px;
height:50px;
width:50px;
/*絕對定位
預設參照點是網頁
若父級元素上加了position:relative;，參照點就是父級元素*/
position:absolute;
top:10px;
}
#div02{
border:dashed 2px coral;
height:300px;
width:800px;
margin-bottom:10px;
/*使用相對定位，相對的是原來這個div所在的位置，再向定義的方向移動指定的位移（top,bottom,left,right）
這個就和其他兩個不在一個層級上，就可以挪位置
前面空出的位置是可以寫東西的*/
position:relative;
left:100px;
top:100px;
background-color:coral;
z-index:2
}
#div03{
border:solid 2px gray;
height:300px;
width:800px;
margin-bottom:10px;
position:relative;
background-color:gray;
z-index:3;
}
#div04{
border:solid 2px blue;
height:50px;
width:50px;
/*固定定位
将元素固定顯示在頁面的指定位置，不會随着滾動條的滾動而移動*/
position:fixed;
top:270px;
right:10px;
}
</style>
</head>
<body>
<div id="div01">
<div id="showdiv">
</div>
</div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
</body>
</html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)