CSS3的網頁定位技術（1）——絕對定位
一：position: absolute;——絕對定位
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
加了position之後你會發現方塊還是沒有變化，這是因為position必須與left和top,right和bottom配合使用。
你只能left和top配合，不能left和right，沒意義。
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
左邊線距離左邊100px，上邊線距離上面100px，他就成這樣了，或者你可以理解成他的座標點就是（100，100）.
一般情況下咱們不會設定底，因為有時候一個東西他是會沒有底的。
這時候你會發現小方塊出生的時候左邊和上面會有一個小空隙，這個小空隙不是margin就是padding是吧，那是誰的？
是body的！！是body的什麼呢？
你可以吧body的margin和padding分別設定成0試一試，
是margin，
Body有個天生的margin是8畫素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
height: 100px;
width: 100px;
background-color: red;
}
.box{
height: 100px;
width: 100px;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
現在讓box變成150px，demo加個透明度opacity: 0.5;
接下來我讓第一個盒子變成定位元素，position: absolute;
你會發現綠色的方塊上去了，這就是層模型的特點。
絕對定位的特點：
脫離原來位置就行定位；
證明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo1{
height: 200px;
width: 200px;
background-color: orange;
}
.demo2{
height: 100px;
width: 100px;
background-color: black;
}
.demo3{
height: 50px;
width: 50px;
background-color: yellow;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2">
<div class="demo3">
</div>
</div>
</div>
</body>
</html>
然後我再第二個盒子（demo2）上面加一個margin-left: 100px;他就帶著他的孩子竄過來了。
在第一個盒子（demo1）上面加一個margin-left: 100px;
讓大盒子帶他們倆個一起過來。
現在我給第三個盒子（demo3）設定一個絕對定位position: absolute;沒變化，只不過他變成了一個可定位元素而已。
現在我加一個left: 50px;
那說明什麼問題，說明他相對於文件的邊框進行定位是吧。
不對，咱還得實驗。
我給他的父級（demo2）加一個position: relative;讓他的父級變成可定位的元素，relative和absolute都行。
他就跑這裡來了。
我如果把他的父級的定位摘掉，放到他的祖父級那裡，
他就變這裡來了。
如果祖父級也沒有定位，他就回到這裡
如果他的祖父級和他的父級都有定位，他還是相對於他父級的。
總結：
Absolute：相對於最近的有定位的父級進行定位，如果沒有最近的父級定位，就相對於文件進行定位。