CSS定位方式：相对 绝对 固定
一、相对定位
position: relative; 默认值为static
left: 10px; 距左
top: 20px; 距上 所以效果为：向右下移动
相对定位 相对于自己原来的位置
特点 1 不脱标 2 原来位置保留，老家留坑 3可以提升层级
left: 10px; 距左
top: 20px; 距上 所以效果为：向右下移动
相对定位 相对于自己原来的位置
特点 1 不脱标 2 原来位置保留，老家留坑 3可以提升层级
使用 1 相对自己进行位置微调 2 配合绝对定位使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
<style>
/*
position: relative;
left: 10px; 距左
top: 20px; 距上 所以效果为：向右下移动
相对定位 相对于自己原来的位置
1 不脱标 2 原来位置保留，老家留坑 3可以提升层级
使用 1 相对自己进行位置微调
2 配合绝对定位使用
*/
.box1{
200px;
height: 200px;
background-color:red;
/* 默认值 */
position: static;
position: relative;
left: 10px;
top: 20px;
}
.box2{
100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
二、绝对定位
position:absolute;
参考点： 1 假如该绝对定位元素 没有定位（相对or绝对or固定）的祖先元素
则以body为参考点
2 假如有定位的祖先，则以最近的定位祖先元素为参考点
参考点： 1 假如该绝对定位元素 没有定位（相对or绝对or固定）的祖先元素
则以body为参考点
2 假如有定位的祖先，则以最近的定位祖先元素为参考点
特性 ：1 脱标 2 假如不设置宽度，则由内容撑开
使用：子绝父相
儿子采用绝对定位，父亲采用相对定位，此时，儿子可以在父亲范围内任意定位
使用：子绝父相
儿子采用绝对定位，父亲采用相对定位，此时，儿子可以在父亲范围内任意定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 绝对定位 position:absolute;
参考点： 1 假如该绝对定位元素 没有定位（相对or绝对or固定）的祖先元素
则以body为参考点
2 假如有定位的祖先，则以最近的定位祖先元素为参考点
特性 ：1 脱标 2 假如不设置宽度，则由内容撑开
使用：子绝父相
儿子采用绝对定位，父亲采用相对定位，此时，儿子可以在父亲范围内任意定位
*/
.box3-fa{
300px;
height: 300px;
border: 4px dashed purple;
position: relative;
left: 40px;
top: 30px;
}
.box3{
200px;
height: 200px;
background-color: cyan;
position: absolute;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="box-gradfa">
<div class="box3-fa">
<div class="box3"></div>
</div>
</div>
</body>
</html>
三、固定定位
position: fixed;
参考点：始终以浏览器窗口左上角为参考点
特点 1 脱标 2 层级高于标准流元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
固定定位 position: fixed;
参考点：始终以浏览器窗口左上角为参考点
特点 1 脱标 2 层级高于标准流元素
*/
.box3-fa{
300px;
height: 300px;
border: 4px dashed purple;
position: relative;
left: 40px;
top: 30px;
}
.box3-fa >.box3{
200px;
height: 200px;
background-color: cyan;
position: fixed;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="box-gradfa">
<div class="box3-fa">
<div class="box3"></div>
</div>
</div>
</body>
</html>