position共有以下4個(gè)值：
1.relative
2.absolute
3.fixed
4.static（默認(rèn)值）
將根據(jù)top，right，bottom，left的值移動(dòng)
1.demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.demo{
display: block;
height: 100px;
background-color: #2AC845;
}
div{
background-color: #0062CC;
}
</style>
</head>
<body>
<a class="demo" herf="#"></a>
<div>
<p class="p1">第一行</p>
<p class="p2">第二行</p>
<p class="p3">第三行</p>
</div>
</body>
</html>
代碼很簡單，效果：
2. relative
給p1加上相對(duì)位置，并向下偏移100px
.p1{
position: relative;
top: 100px;
}
來看下效果：
很明顯的可以看到，p1以其原先的位置偏移了100px，p2、p3位置并未改變。
所以relative的特性總結(jié)來說：
1，按照它理應(yīng)所在的位置進(jìn)行偏移，relative的“相對(duì)的”意思也正體現(xiàn)于此。
2，保留元素原有位置，其他元素位置保持不變
3. absolute
ok，現(xiàn)在給p1加上絕對(duì)位置，并向下偏移100px
.p1{
position: absolute;
top: 100px;
}
來看下效果：
可以看見p1以界面頂部(body)的位置向下偏移了100px，p2占據(jù)了p1原先的位置，p3則占據(jù)p2原先的位置（就如原先就未創(chuàng)建p1節(jié)點(diǎn)一樣）。
可以看見并沒有以父節(jié)點(diǎn)為定位點(diǎn)進(jìn)行偏移，那么我們改動(dòng)一下：
div{
position: relative;
background-color: #0062CC;
}
再來看下效果：
可以看見p1以div頂部的位置向下偏移了100px。將div的position修改為非默認(rèn)值的效果是一致的。
所以absolute的特性總結(jié)來說：
1，absolute讓元素漂浮起來，其他元素占用其原來位置
2，absolute以其父元素有position屬性的元素為定位，如果沒有該父元素，以瀏覽器窗口進(jìn)行定位（這時(shí)候同等fixed效果)
4. fixed
fixed是特殊的absolute，即fixed總是以body為定位對(duì)象的，
按照瀏覽器的窗口進(jìn)行定位,即使拖動(dòng)滾動(dòng)條，他的位置也是不會(huì)改變的。
如返回頂部的按鈕就是用這個(gè)屬性實(shí)現(xiàn)的，很好理解，不多做介紹了。
