1、开启定位
相对定位：给元素设置position:relative 并且需要设置left、right、top、bottom四个属性来调整位置，如果没有设置这4个属性，默认都是0，这时盒子在视界上不会发生移动。
绝对定位：给元素设置position:absolute 并且需要设置left、right、top、bottom四个属性来调整位置，如果没有设置这4个属性，默认到包含块（这里是整个页面）的距离，这时盒子在视界上不会发生移动，但是后面的元素会移动
仅开启定位，但是不设置left、right、top、bottom时，两个定位的对比效果图：
2、相对定位的参考点在哪里？
相对元素自己原来的位置
3、相对定位的特点：
1、不会脱离文档流，元素的位置变化，只是视界效果上的变化，不会对其他元素产生影响。
2、定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
。定位的元素会覆盖在普通的元素之上。
。都发生定位的两个元素，后写的元素会覆盖先写的元素。
相对定位演示代码：
<html>
<head>
<style>
.outer{
width: 300;
height: 300px;
background-color: gray;
}
.inner1{
width: 70;
height: 70;
background-color: orange;
}
.inner2{
width: 50;
height: 50;
background-color: green;
position: relative;
top: -70;
right: 0;
}
.inner3{
width: 70;
height: 70;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">盒子1</div>
<div class="inner2">盒子2</div>
<div class="inner3">盒子3</div>
</div>
</body>
</html>
相对定位演示效果图如下：
3、left不能和right一起设置，top不能和bottom一起设置。
4、相对定位的元素，也能继续浮动，但不推荐这样做。
5、相对定位的元素，也能通过margin调整位置，但不推荐这样做。
6、绝大多数情况下，相对定位，会与绝对定位配合使用。