<!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>
