<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: #605ca8;
}
.box2{
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
.box3{
background-color: #bfa;
}
.span1{
width: 100px;
height: 100px;
background-color: #ffff22;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<!--Emmet-->
<!--div.box.box${box$}*3-->
<!--
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
-->
<!--
相对定位的特点
1、就是我们只设置position: relative;之后，元素时不会动的，我们必须通过left right top bottom四个属性来设置偏移才能使它动
2、相对定位不会脱离文档流
3、相对定位是相对于它原来的位置（它原来在文档流中的位置）进行定位
4、相对定位会提升元素的一个层级，所以会比其它在文档流中的元素要高
5、相对定位不仅可以作用于块级元素，内联元素也可以，相对定位因为没有脱离文档流，所以不能够改变盒子的属性，也就是块状元素还是块状，内联元素还是内联，下一节课里面的绝对定位会改变盒子的性质
-->
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<span class="span1">span1</span>
</body>
</html>
