.CSS定位詳解
CSS定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。但是卻能夠形成豐富的表現。
一、相對定位：relative
相對定位是相對於自身定位的元素進行定位的，它的參照物就是本身。
還有一點，相對定位後的元素依然會佔據原來的位置空間，我們可以通過程式碼來觀察它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位</title> <style> *{ margin: 0px; padding: 0px; } .model1{ position: relative; background-color: aqua; left:200px; } .model2{ position: relative; background-color: blue; } </style> </head> <body> <span class="model1"> Model1 </span> <span class="model2"> Model2 </span> </body> </html>
如圖可以看到當前Model1存在的位置，通過程式碼段我們發現雖然Model1右移了200px，但是Model2並沒有前移佔據Model1的原來的地方即空心框（空心框是後期加上去的），說明Model1依然佔用著原來的位置。
二、絕對定位：absolute
絕對定位的元素是脫離了頁面的，因此通過絕對定位定位的元素不會佔據頁面的位置空間。
而且絕對定位的參照物件是父級盒子中的相對定位和絕對定位的盒子。
參照物：相對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位</title> <style> *{ margin: 0px; padding: 0px; } .model{ position: relative; width: 100px; height: 100px; background-color: red; margin:100px auto; } .model1{ position: absolute; width: 50px; height: 50px; left:50px; background-color: aqua; } .model2{ position: absolute; width: 25px; height: 25px; left:25px; background-color: blue; } </style> </head> <body> <!--.model父盒子是相對定位的--> <div class="model"> <!--.model1子盒子和.model2子盒子是絕對定位的--> <div class="model1"></div> <div class="model2"></div> </div> </body> </html>
執行結果如圖，因為父級物件（紅色背景）是相對定位的，可以看出兩個子盒子（藍色背景和淡藍色背景）一個右移25px，一個右移50px。都是以相對定位的父級盒子為參照物件的。
如果我們將父級盒子的相對定位屬性去掉的話，結果如下圖。
可以看到兩個子盒子的位置變化非常明顯，這是因為在父級盒子（不一定是上一層父級盒子，祖父級或者更上也可以）中沒有相對定位的盒子存在，那麼這個時候通過絕對定位的盒子就將以body為參照物（其實body本身就是一個相對定位的盒子）。
參照物：絕對定位
我們重新將父盒子（紅色背景）的定位設定為絕對定位，然後看結果圖。
這樣也可以使絕對定位的子盒子以父盒子進行定位。
但是我們還是推薦使用相對定位的盒子做參照物，因為絕對定位的元素都已經跳出了頁面，所以當我們做頁面架構的時候，外層的框架如果都使用絕對定位的話，那麼我們必須為每一個外層框架元素去設定定位，這樣是很麻煩的。相反相對定位更適合外層佈局，因為這樣簡單直觀，更方便理解。
三、固定定位：fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.model{
position: fixed;
width: 100px;
height: 100px;
right: 0px;
top:300px;
background-color: green;
}
</style>
</head>
<body>
<div class="model"></div>
</body>
</html>
固定定位的思想很簡單，他是以瀏覽器視窗為參照的。就是說如果一個網頁能下拉很多的內容，當你在下滑時，固定定位在頁面的位置是不會發生改變的。（固定定位常常用來製作導航欄和回到頂部的部件）