平時在寫css樣式的時候position是我們比較常用的一個屬性。有時候會弄不清其幾個屬性值的真正區別。不過用的時間久了，也就慢慢的明白了。不過其實想用好position有時候還是需要些技巧的。寫篇博文總結下自己。
- position的作用：用於設置對html元素的定位方式
- position屬性的值：
| 值名稱 | 描述 |
| static | position的默認值，設置此屬性時，元素按照正常的流式佈局往下排列 |
| inherit | 繼承父元素的position值 |
| relative | 相對於其他元素的定位 |
| absolute | 相對於採用static定位的父元素的絕對定位 |
| fixed | 相對於瀏覽器的絕對定位 |
備註：如果給元素才用了top,left等定位屬性時，只有relative,absolute,fixed纔會有效果。
3.應用實例
這裏主要記錄是absolute和fixed屬性值。absolute與fixed的好處主要就是它的定位不拘束於其它同級元素，不想其它幾種佈局自己的定位會被其它元素所影響。所以像做一些動畫效果，div浮動效果的時候，這個兩個屬性值就尤爲適合了。
4.結合z-index的使用
z-index 用於控制元素在頁面中層級的位置，就跟高樓大廈的樓層一樣，z-index則可用於控制所在的樓層。absolute與fixed都支持z-index屬性。所以當幾個元素採用absolute或者fixed屬性時，爲了達到層次顯示的效果，z-index屬性就很方便了。
5.示例：
<html>
<title>Position</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container{
height:1000px;
width: 960px;
margin: auto;
background-color: blue;
}
#roll-top {
padding:20px;
background-color:#525252;
cursor: pointer;
right:10px;
}
#roll-top,#below{
position:fixed;
top:85%;
font-size:12px;
color:#FFFFFF;
}
#below{
width:100%;
height:100px;
background-color:#757575;
z-index: -1;
}
</style>
<script type="text/javascript">
function rollbackTop(){
window.scrollTo(0);
}
</script>
</head>
<body>
<div id="container">
</div>
<div id="roll-top" οnclick="rollbackTop()">返回頂部</div>
<div id="below">我在下面</div>
</body>
<script></script>
</html>像利用absolute做動畫效果的例子在JQuery官方上面的例子還是比較多。再次就不做詳解了。