最近在學習CSS，一直對絕對定位和相對定位的理解不是很清楚，今天自己根據網上的資料，做了一些實驗，纔算對定位有了一些初步的理解（因爲單純的看網上的教程，還是不能真正理解）。
絕對定位（absolute）
1、絕對定位就相當於你把定位的元素從文檔中摳了出來，那麼這個元素原來的位置就空了出來，可以由別的元素來佔據。那麼被摳出來的元素放在那裏呢？這就是絕對定位的意義了，就如w3school中寫的那樣：
CSS 爲定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
其中的一句話：將佈局的一部分與另一部分重疊。 這就是絕對定位 的意義。你摳出來的元素就相當於可以在原來文檔那一層的上層進行放置（佈局）。
那麼這裏就涉及到了一些問題，我用來定位的top，left，right和bottom對於設置了絕對定位（absolute）的元素來講是怎樣的呢？這個問題也是困擾了我挺久的。通過自己寫了一些代碼和看了一些資料，終於明白了。
2、如果你把一個元素設置爲absolute，其他的屬性（top，left，right和bottom）不進行設置，那麼它只會被摳出來，其他元素佔據它的位置，除此之外，沒有其他任何變化。就是說，當一個元素被設置爲absolute後，它的默認的top，left的值並不是0，而是被摳出來之前（被設置爲absolute之前）的值，該在哪個位置，還是哪個位置。
那這時你可能會遇到新的問題，那我要自己設置top，left的值，到底相對的是哪個元素？是它的父元素嗎？怎麼看了這麼多資料還是不明白呢？沒事，您繼續往下看。
3、如果我想設置定位方式爲absolute的元素的top和left值，那麼它相對的是第一個設置了定位方式（除static外）的父元素，爲什麼除static，因爲元素的默認定位方式是static，設置爲static相當於沒有設置。那麼有人要問，如果是inherit定位方式呢，那麼你就要看看繼承下來之後是什麼了，具體問題具體分析，但原則不變。如果所有的父元素都沒有設置呢？那就是body元素了（在Chrome瀏覽器是這樣的，其他瀏覽器沒有實驗）。
至此，你可能對絕對定位的一些不理解的地方也差不多理解的差不多了。那你又要問了，爲什麼有些視頻教程上設置元素爲絕對定位時，總是把直接父元素設置爲相對定位（relative）呢？下面就涉及到了相對定位。
相對定位 （relative）
1、那麼到底什麼是相對定位呢？看w3school中的解釋：
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
以及：
生成相對定位的元素，相對於其正常位置進行定位。因此，”left:20” 會向元素的 LEFT 位置添加 20 像素。
這些解釋說了意思就是，如果一個元素被設置成了relative，它也相當於被摳了出來，但是它原來的位置不會被別的元素佔據。這是與absolute不一樣的地方。那麼我自己設置被設置爲relative的元素的top和left的值時，相對的元素就是元素自身。
那到底爲什麼設置元素爲絕對定位時，總是把直接父元素設置爲相對定位（relative）呢？
2、我也說不出來爲什麼，但是有一點感覺就是爲了定位的方便。（感覺自己說了廢話）。你要知道，如果一個元素被設置爲relative，那麼它默認的top值和left值時0。這也是與absolute不同的地方。就是說你把一個元素設置爲relative，其他的值不進行設置，它還是會在原來的位置。不會改變。只是給他設置了一個定位方式，它不再是默認的static了。那麼它的子元素進行絕對定位時就能相對與這個父元素進行了。不用去費勁找父元素了。我只要設置相對這個父元素的絕對定位就行了。那你說父元素也可以設置爲其他的定位方式啊，是的，所以我也不太清楚到底是爲什麼。還是等大牛來解答這個疑惑吧。
不過至少你弄清楚了這個絕對定位和相對定位到底相對的是什麼。
附上實驗用的代碼，真的超級簡單，都不好意思往上傳，要是有真心不知道怎麼實驗的朋友，可以看看。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定位方式</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="ancestor">
<div class="parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
</div>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
.ancestor{
width: 400px;
height: 750px;
border: 1px solid red;
margin-left: 20px;
margin-top: 20px;
position: absolute;
}
.parent{
width: 350px;
height: 700px;
margin-left: 30px;
margin-top: 30px;
border: 1px solid blue;
position: absolute;
}
.box{
width: 300px;
height: 150px;
border: 1px solid black;
}
.box3{
position:relative;
top: 0px;
left: 0px;
}
這些是我自己的一點心得，幫助一些剛剛入門的朋友，知識點不是很多。
如果有錯誤還請各位朋友批評指正。感謝！