在這段時間對CSS學習中到今天也終於能收個尾了，小編這篇會對CSS中的3種定位做一個詳細介紹

1.相對定位

相對定位：相對於自己原來的位置進行移動。

實際程式碼操作：對於標籤樣式先宣告

position:relative;

再描述移動方向與畫素大小

left帶正數向右移，以此類推正數情況下方向相反，那麼在這種情況下對於初學的我門這種定位可以以帶負數形式就與標籤頭方向相同了。

值得我們注意的是一個口令：不脫標 老家留坑 形影分離

這三個相對定位的性質值得我們注意，以相對定位移動盒子後盒子時不脫離標準流的，所移動的是一個“虛影”，並非整個盒子往那邊移動所以“老家留坑”。

相對定位在實戰中用得比較少，一般用於盒子微調。

2.絕對定位

絕對定位：移動相對於頁面頂

position:absolute;

在介紹絕對定位時我們同時引入一個概念：參考點

絕對定位定位時按照參考點來引入移動。

絕對定位使用後脫標。

1.top，bottom參考點

這是在使用絕對定位時非常難以理解的一個點，在這個情況下使用這兩個方向是與相對定位不同的。

top在定位時以網頁左上方頂點為原點移動而不是瀏覽器左上頂點。

而bottom就更難理解一點這裡小編以蒐集來的一道面試題來講解一下：

答案：

那麼這邊做一下解釋：bottom屬性絕對定位時所參考的是瀏覽器首屏頁面的左下頂點。根據題目來理解含義很方便。

2.引入祖先標籤後參考點改變

這邊說一下當所需定位標籤“祖輩”標籤也有定位時那麼該盒子的參考點為祖輩盒子，同時當很多祖輩都有定位時以最近祖輩盒子作為參考點。

一般以“子絕父相”實用。

絕對定位後的盒子無視padding，這點在這一部分用得最多。

3.絕對定位盒子居中

因為盒子絕對定位後脫標所以margin:0 auto;失效

那麼我們做公式記一個：

   width: 600px;
   height: 60px;
   position: absolute;
   left: 50%;
   top: 0;
   margin-left: -300px;   → 寬度的一半

3.固定定位

固定定位，不明思議就是固定盒子不隨網頁滑動而移動

固定定位盒子也脫標

position:fixed;

這邊這個也不多做介紹，在實戰中用到修飾導航條和點選置頂比較多。

4.z-index

該屬性描述的是定位盒子覆蓋問題，只有有定位屬性的標籤才有。

在沒有書寫該屬性時，如有兩個盒子有重合衝突的覆蓋問題時那麼寫在HTML後的標籤會覆蓋之前的。

寫了之後那麼就是z-index大的覆蓋小的。

注意：z-index從父，如果某兩個個標籤的“父親”都同時有z-index屬性那麼就不需要管兒子的z-index屬性，不管兒子是多少，孩子父親大的就覆蓋那個父親z-index小的孩子。

定位總的來說在站中使用的也有，我們主要是要明瞭操作才更方便之後的做站。