在前端網頁布局中，在同一平面上布局，我們大都采用float屬性來定位網頁元素的位置。但是涉及到彈出層、浮層、頁面廣告插件等等，都需要CSS中的position屬性來定位了，對於初學者來說經常分不清楚是應該用position屬性的absolute值、relative值、fixed值等等，下面我們就position屬性基本的這三個值的用法做一些簡單的介紹，希望對初學者有些幫助。
1、position的absolute（絕對定位）
在這里position的absolute絕對定位我們分兩類來講：
A：給元素定義了position:absolute，其父框架沒有定義任何position屬性。此時的絕對定位就是相對於頁面四周最邊緣來進行定位的，位置將依據瀏覽器左上角的0點開始計算，絕對定位使元素與文檔流無關，因此不占據空間。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。其位置不受父框架的影響，只以頁面四周邊緣開始計算。代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}
.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}
</style>
</head>
<body>
<div class="all">
<div class="demo">
position:absolute;<br />
left:100px;<br />
top:200px;<br />
</div>
</div>
</body>
</html>
效果如下圖：
B：給元素定義了position:absolute，其父框架定義了position:absolute\position:relative\position:fixed屬性。此時的絕對定位就是相對於父框架最邊緣最邊緣來進行定位的，絕對定位使元素與文檔流無關，因此不占據空間。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。其位置只在父框架內做變化，代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}
.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}
</style>
</head>
<body>
<div class="all">
<div class="demo">
position:absolute;<br />
left:100px;<br />
top:200px;<br />
</div>
</div>
</body>
</html>
效果如下圖
所以，如果頁面元素的定位，想要定義在父元素內，而不受顯示器分辨率，瀏覽器窗口大小等限制時，建議采用B種方案。
2、position的relative（相對定位）
如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然后通過設置垂直或水平位置，讓這個元素“相對於”它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其他框）。
relative的確是相對於自己來定位的,父DIV設置了position:relative 沒有給出值，它自身是沒有效果的
但是對於它的子元素起到了參照作用
3、position的fixed fixed總是以body為定位時的對象，總是根據瀏覽器的窗口來進行元素的定位，通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。
關於position用法貌似還有很多，小編語言組織能力不是太好，總結一下用法：
當你需要做一個有下拉二級菜單效果時，父元素你需要position:relative，而里面的下拉元素則需要position:absolute。
當你需要做一個頁面漂浮的廣告，或者做一個返回頁面頂端的按鈕是，你需要position:fixed。
通常我們使用position:absolute；position:relative進行絕對定位布局，通過CSS進行定義定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute進行定位，同時不要忘記使用left、right、top、bottom的配合定位具體位置。絕對定位如果父級不使用position:relative，而直接使用position:absolute絕對定位，這個時候將會以body標簽為父級，使用position:absolute定義對象無論位於DIV多少層結構，都將會被拖出以<body>為父級（參考級）進行絕對定位。絕對定位非常好用，但切記不要濫用，什么地方都用，這樣有時會懶得計算距離上、下、左、右間距，同時可能會造成CSS代碼臃腫，更加經驗適當使用，用於該使用地方。
在絕對定位時候我們可以使用css z-index定義css層重疊順序。
同時left、right、bottom、top的數值，可以使用（Photoshop）PS切片工具獲取准確的數值。
末了，小編在提醒一句，如果你在你的父DIV里面的子DIV使用了position:absolute屬性定位，而父DIV沒有做任何定義（父DIV里面已經被其他元素填充占據），還想要子DIV定義起到作用，這個時候子DIV你可以不用left、top、right、bottom來定義，可以使用margin-top、margin-left來定義，但是此種方法在ie6/7下和ie8/9/10/11、火狐、谷歌下面的位置是不一樣的，針對ie6/7你需要用到css Hack，代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}
.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}
</style>
</head>
<body>
<div class="all">
<img src="1.jpg" width="600" height="600" />
<div class="demo">
position:absolute;<br />
margin-left:100px;<br />
margin-top:200px;<br />
</div>
</div>
</body>
</html>
效果如下圖
使用CSS Hack之后 代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}
.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}
</style>
</head>
<body>
<div class="all">
<img src="1.jpg" width="600" height="600" />
<div class="demo">
position:absolute;<br />
margin-left:100px;<br />
margin-top:200px;<br />
</div>
</div>
</body>
</html>
在各個版本的瀏覽器下的 效果如下
此種方法最好不要使用 在不同版本瀏覽器下需要來回的用CSS Hack調整！