css备忘录- position

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

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

1.demo

    
        
        
        
        
    

    
        
        

            
第一行
            
第二行
            
第三行
        
    

代码很简单，效果：

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为定位对象的，
按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。

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