1、什麼是定位？

CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素後面，並指定一個元素的內容太大時，應該發生什麼。元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非事先設定position屬性。他們也有不同的工作方式，這取決於定位方法。

有四種不同的定位方法。

屬性值

2、absolute絕對定位 

absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，但是它不是相對於視窗，而是相對於最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那麼它是相對於文件的 body 元素，並且它會隨著頁面滾動而移動。記住一個“positioned”元素是指 position 值不是 static 的元素。與相對定位不同，絕對定位是脫離原文件流的。

2.1 塊級元素的絕對定位

*{
	margin: 0;
	padding:0;
}
	body{
	position: relative;
}
	.box1,.box2,.box3{
	/*沒有設定寬度*/
	height: 100px;
}
	.box1{
	background: red;
}
.box2{
	background: orange;
	position: absolute;
	left: 100px;
	top: 100px;
}
.box3{
	background: gray;
}

<div class="box1">dtyjkrtyj</div>
<div class="box2">good morning hi</div>
<div class="box3">rytjsdrty</div>

給第二個box添加了絕對定位，這個box只能根據body進行定位偏移，並且box3出現在原本box2的位置上。css中都沒有給box新增寬度，而沒有新增絕對定位的box長度為100%（相對定位的元素也是100%），而box2寬度為auto，在這裡隨著標籤裡的文字長度而變化。

2.2 行內元素的絕對定位

*{
	margin: 0;
	padding:0;
}
body{
	position: relative;
}
.box1,.box2,.box3{
	width: 100px;
	height: 100px;
}
	.box1{
	background: red;
}
.box2{
	background: orange;
	position: absolute;
	left: 100px;
	top: 100px;
}
.box3{
	background: gray;
}

<span class="box1">dtyjkrtyj</span>
<span class="box2">good morning</span>
<span class="box3">rytjsdrty</span>

在新增絕對定位之前，寬度和高度對行內元素不起作用，而box2添加了絕對定位，則box2由行內元素變成塊級元素，並進行偏移
3、relative相對定位 

不脫離標準文件流，“老家留坑，形影分離”。

特點：如果設定了相對定位並且設定了top、left、right、bottom屬性，那麼將來盒子會以盒子原來所在的位置進行偏移

相對定位的用途：一般不用於做“壓蓋效果”，就兩個作用：

　　（1）微調元素

　　（2）絕對定位的參考，子絕父相

relative 表現的和 static 一樣，除非你添加了一些額外的屬性。

在一個相對定位（position屬性的值為relative）的元素上設定 top、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。

4、fixed固定定位 

一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文件流）。令人驚訝地是移動瀏覽器對 fixed 的支援很差。