相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
/*
* 定位：
* 定位指的就是将指定的元素摆放到页面的任意位置
* 通过定位可以任意的摆放元素
* 通过position属性来实现元素的定位
* 可选值：
* static 默认值 ，元素没有开启定位
* relative 开启元素相对定位
* absolute 开启元素的绝对定位
* fixed 开启元素的固定定位 （也是决定定位的一种）
*/
/*
* 当元素的position属性设置为relative时，开启元素相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生变换
* 2.相对于原来的位置进行移动
* 3.相对定位的元素不会脱离文档流 灵魂出窍
* 4.相对定位会使元素提升一个层级
* 5.相对元素不会改变元素的性质，块还是块，内联还是内联 比如span
*/
position: relative;
/*
* 当开启元素的定位（position）属性值是一个非static的值时，
* 可以通过 left right top bottom四个属性来设置元素的偏移量
* left 元素相对于其定位的左侧偏移量
* right 元素相对于其定位的右侧偏移量
* top 元素相对于其定位的上侧偏移量
* bottom 元素相对于其定位的下侧偏移量
*
* 通常偏移量只需要2个就可以对元素进行定位
* 一般选择一个水平方向偏移量 和一个垂直方向偏移量
*/
left:200px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: aqua ;
}
.s1{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<!--要求：将box2移到box3右边
1.将box2向右移动
2.将1.向下移动-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span </span>
</body>
</html>
