相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.22.01.css"> -->
<style>
body{
font-size:60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
/*
定位（position）
定位是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任何位置
-使用position属性来设置定位
可选值：
static：默认值，元素时静止的没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
相对定位：
-当元素的position属性值设置为relative时则开启了元素的相对定位
-相对定位的特点：
1、元素开启了相对定位后，如果不设置偏移量，元素则不会发生任何的变化
2、相对定位时参照于元素在文档流中的位置进行定位的
3、相对定位会提升元素的层级（可以盖住其他元素）
4、相对定位不会使元素脱离文档流（因为下面的元素（box3）并没有上移，还是独占一行）
5、相对定位不会改变元素的性质，块还是块，行内还是行内（因为下面的元素（box3）并没有上移，还是独占一行）
偏移量（offset）
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top 定位元素和定位位置上边的距离
bottom 定位元素和定位位置下边的距离
-定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一个
-top值越大，定位元素越向下移动
-bottom值越大，定位元素越向上移动
left 定位元素和定位位置的左侧距离（向右移动）
right 定位元素和定位位置的右侧距离（向左移动）
-定位元素水皮方向的位置由left和right两个属性来控制
通常情况下我们只会使用其中一个
-left值越大，定位元素越向右移动
-right值越大，定位元素越向左移动
*/
position: relative;
/* left: 0;top: 0 ;*/
/*设置这两个属性，并且属性值为0可以找寻定位位置 */
left: 200px;
top: -200px;
}
.box3{
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
运行结果为：