<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- position
属性值：
相对定位(relative)
left right top bottom
1.使用相对定位后，不会脱离文档流。也就不会影响其他元素的位置
2.只是用相对定位，不使用以下left等四个值是不会进行偏移的
如何使用相对定位：如
position:relative;
left:100px;
top:100px;
绝对定位(absolute)
1.使用绝对定位后，脱离文档流
2.使内联元素支持宽高，如span
3.使块元素的宽度跟随内容决定（让块标签具有内联的一些特性）
4.父元素没有定位元素，而子元素有定位元素，那么子元素的偏移是按照整个文档流进行的，而不是按照盒子进行的，给父元素设置定位后，则解决这个问题（固定定位，相对定位，绝对定位）
-->
<style>
#Position_01{
width: 100px;
height: 100px;
background-color: #0000FF;
}
#Position_02{
width: 100px;
height: 100px;
background-color: red;
position: relative;/* 相对定位 */
left: 100px;
top: 100px;
}
#Position_03{
width: 100px;
height: 100px;
background-color: #000000;
color: #FF0000;
position: absolute;
}
#Positon_04{
width: 200px;
height: 200px;
border: 2px solid #0000FF;
position: relative;
}
#Position_05{
width: 100px;
height: 100px;
background-color: #000000;
/* position: absolute; *//* 脱离文档流，下面盒子上来 */
}
#Position_06{
background-color: #FB8303;
position: absolute;该盒子不设置宽高，设置绝对定位后，使块元素具有内联作用（宽度根据内容决定）
}
span{
width: 100px;
height: 100px;
background-color: #0000FF;
position: absolute;/* 内联标签占宽高 */
bottom: 150px;
}
#Position_07{
width: 100px;
height: 100px;
background-color: antiquewhite;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<!-- #相对定位
<div id="Position_01">1</div>
<div id="Position_02">2</div>
<div id="Position_03">3</div> -->
<div id="Positon_04">
<div id="Position_05">2</div>
<div id="Position_06">3</div>
<div id="Position_07">4</div>
</div>
<span>111</span>
</body>
</html>