絕對定位的定義
position: absolute;
它使相對不是static的最近一次的有定位父元素來進行定義的。（（這裏的所有定位都不能是默認值 static）一開始設置定位時 就找上一級的父元素是否有定位 有就以它爲基準定位 若是沒有就繼續往上找 直到找到有定位的元素 實在沒有就會以body爲基準定位）
被定位的元素會完全脫離文檔流，然後我們可以通過left,right,top,bottom來調整元素的位置。
特點：
1.完全脫離文檔流
2.提升層級整級
3.針對父級定位，如果父級沒有定位，那就找父級的上一級，如果父級的上一級還是沒有定位，最終以ducument進行定位。
<div position>
<div position>
<div style="position: absolute;"></div>
</div>
</div>下面的列子第三層div就是以第二層div來定位 因爲第二層div就有定位了
4.絕對定位一般配合相對定位使用，相對定位做父級，絕對定位做子級
<div position>
<div positon>
<div position:relative>
<div position:absulute></div>
</div>
</div>
</div>這裏的第四層div的就是子級絕對定位 第三層div就是第四層的父級且相對定位
5.支持所有的CSS樣式
6.提升定位元素層級的命令 z-index 數字越大，越上層顯示
7.如果絕對定位的子級有浮動，可以不做清除浮動操作的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 300px;
height: 300px;
background: silver;
position: relative;
border: 5px solid red;
margin: 0px auto;
}
#div div{
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
position: absolute;
background: green;
}
.div1{
}
.div2{
left: 200px; /* right: 0px; top:0px 相同效果*/
}
.div3{
left: 100px;
top: 100px;
}
.div4{
top: 200px; /*left: 0px; bottom: 0px; 相同效果 */
}
.div5{
left: 200px;
top: 200px; /*right: 0px; bottom: 0px; 相同效果*/
}
</style>
</head>
<body>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
</body>
</html>
