<!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: yellow;
/*
定位
指的是将指定元素摆放到页面的任意位置
通过定位可以任意摆放元素
通过position属性设置元素定位
可选值：
static 默认值 元素没有开启定位
relative 开启元素相对定位
absolute 开启元素绝对定位
fixed 开启元素固定定位（也是绝对定位的一种）
*/
/*当元素的position属性设置为relative，开启相对定位*/
/*
1 开启了元素的相对定位以后，不设置偏移量时，元素不会发生改变
2 相对定位是相对于元素在文档流中原来的位置进行定位
3 相对定位的元素不会脱离文档流
4 相对定位会使元素提升一个层级
5 相对定位不会改变元素性质，块还是块，内联还是内联
*/
position: relative;
/*
开启了元素定位（position属性值时一个非static的值）时
可以通过left right top botttom四个属性设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上方偏移量
bottom：元素相对于其定位位置的下方偏移量
通常偏移量只需使用两个就可以对一个元素进行定位
一般会选择水平方向偏移量和垂直方向偏移量对一个元素定位
*/
left: 200px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<!-- div.box$*3 快捷创建盒子 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是span</span>
</body>
</html>
定位
指的是将指定元素摆放到页面的任意位置
通过定位可以任意摆放元素
通过position属性设置元素定位
可选值：
static 默认值 元素没有开启定位
relative 开启元素相对定位
absolute 开启元素绝对定位
fixed 开启元素固定定位（也是绝对定位的一种）
*/
/*当元素的position属性设置为relative，开启相对定位*/
/*
1 开启了元素的相对定位以后，不设置偏移量时，元素不会发生改变
2 相对定位是相对于元素在文档流中原来的位置进行定位
3 相对定位的元素不会脱离文档流
4 相对定位会使元素提升一个层级
5 相对定位不会改变元素性质，块还是块，内联还是内联
开启了元素定位（position属性值时一个非static的值）时
可以通过left right top botttom四个属性设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上方偏移量
bottom：元素相对于其定位位置的下方偏移量
通常偏移量只需使用两个就可以对一个元素进行定位
一般会选择水平方向偏移量和垂直方向偏移量对一个元素定位