position: relative
position: absolute;
posion: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /* 相对定位*/
border: #a2148f 2px dashed;
position: relative;
left: 50px;
}
/* 绝对定位:
1.相对浏览器
2.父级元素标签定位后就相对父级标签
*/
div:nth-of-type(2){
border: #a2148f 2px dashed;
position: absolute;
left: 100px;
}
div:nth-of-type(3){/* 固定定位:导航栏，广告什么的 */
border: #a2148f 2px dashed;
position: fixed;
right: 50px;
}
</style>
</head>
<body>
<div>
<div>d1</div>
<div>d2</div>
<br>
<div>d3</div>
</div>
</body>
</html>
