css备忘录- position

position共有以下4个值：
1.relative
2.absolute
3.fixed
4.static（默认值）

将根据top，right，bottom，left的值移动

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加上相对位置，并向下偏移100px

.p1{
    position: relative;
    top: 100px;
}

来看下效果：

很明显的可以看到，p1以其原先的位置偏移了100px，p2、p3位置并未改变。
所以relative的特性总结来说：
1，按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
2，保留元素原有位置，其他元素位置保持不变

3. absolute

ok，现在给p1加上绝对位置，并向下偏移100px

.p1{
    position: absolute;
    top: 100px;
}

来看下效果：

可以看见p1以界面顶部(body)的位置向下偏移了100px，p2占据了p1原先的位置，p3则占据p2原先的位置（就如原先就未创建p1节点一样）。
可以看见并没有以父节点为定位点进行偏移，那么我们改动一下：

div{
    position: relative;
    background-color: #0062CC;
}

再来看下效果：

可以看见p1以div顶部的位置向下偏移了100px。将div的position修改为非默认值的效果是一致的。

所以absolute的特性总结来说：
1，absolute让元素漂浮起来，其他元素占用其原来位置
2，absolute以其父元素有position属性的元素为定位，如果没有该父元素，以浏览器窗口进行定位（这时候同等fixed效果)

4. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，
按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。

如返回顶部的按钮就是用这个属性实现的，很好理解，不多做介绍了。