相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: red;
}
.box2{
width: 200px;
height: 200px;
background: yellowgreen;
/* {
margin: 0;
padding: 0;
}
定位：指的是将指定的元素摆放到页面的任意位置
1. 档开启了元素的相对定位，而不设置偏移量时，元素不会发生任何变化
开启定位： position的值非 static 时
2. 相对定位是相对于元素在文档流中原来的位置进行定位
3. 相对定位元素并没有脱离文档流
4. 相对定位元素会比文档流高一个层级
5. 相对定位不会改变元素的性质
*/
position: relative;
left:100px;
top:200px;
}
.box3{
width: 200px;
height: 200px;
background: yellow;
}
/*
相对定位不会改变元素的性质:
内联 inline 元素，即使开启 position 也不能设置宽高
*/
.s1{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</div>
</body>
</html>