定位：position
注： 所有標籤中都可以進行定位，並且浮動，但是在html中凡是越強大的東西，就越少用
定位position與top、left、right、bottom一起使用
元素設置了浮動，定位也一般用在塊狀元素上
相對定位：position:relative
相當於自身位置左上角來移動，並且原來位置保留，也不會給其他元素用（保留了獨佔一行的特性）。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#person{
border: 1px solid black;
height: 300px;
width:500px;
}
#sun1{
border: 1px solid red;
height:100px;
width:100px;
position:relative;
left:10px;
top:20px;
}
#sun2{
border: 1px solid blue;
height:100px;
width:100px
}
</style>
</head>
<body>
<div id="person">
<div id="sun1">
</div>
<div id="sun2">
</div>
</div>
</body>
</html>
絕對定位：position:absolate
1. 在自身原來位置浮動起來（是在沒有設置偏移量（top、left、right、bottom）的情況下）,這裏相當於設置了float: left。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#person{
border: 1px solid black;
height: 300px;
width:500px;
}
#sun1{
border: 1px solid red;
height:100px;
width:100px;
position : absolute;
/*絕對定位*/
}
#sun2{
border: 1px solid blue;
height:90px;
width:90px
}
</style>
</head>
<body>
<div id="person">
<div id="sun1">
</div>
<div id="sun2">
</div>
</div>
</body>
</html>
2. 如果設置偏移量，則就找父元素或祖先元素是否有定位，相對於父元素或祖先元素的左上角定位，沒有的話就相對於body左上而發生偏移
固定定位：position:fixed
固定定位多用在導航欄，廣告推薦，到頂部，到底部
在自身位置浮動起來（浮於最上方，不佔位置），相對於body發生偏移,並且不隨滾動條而改變，也就是始終在看得見的頁面上的指定位置。例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#person{
border: 1px solid black;
height: 300px;
width:500px;
}
#sun3{
background-color: black;
height:20px;
width:30px;
position: fixed;
right:20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="person">
<div id="sun3">
</div>
</div>
</body>
</html>