css position

今天介绍position中的四个属性：static、relative、absolute、fixed
先创造出三个不同颜色的方块，css设定如下

        .box1, .box2, .box3{
            height: 300px;
            width:300px;
            color: white;
            font-size: 30px;
            display: inline-block;
        }

static

static是预设的状态，被设定为static时left、right、top、bottom等改变位置的语法都不会作用

        .box2{
            position: static;
            left: 50px;
            top:50px;
        }

relative

relative就是相对的意思，代表其他的物体会受到它的影响

        .box2{
            position: relative;
            left: 50px;
            top:50px;
        }

可以观察到位移元素发挥了作用，并且两个box之间还保留着box2本来占有的区域

absoluate

absolute就是绝对的意思，代表其他物体不会受到它的位置影响

        .box2{
            position: absolute;
            left: 50px;
            top:50px;
        }

可以看出方块发生了位移，但是位移的起始位置是画面的左上角，而不是box1的右方，并且box1和box3之间没有保留原来的空位
值得注意的是，当位移数值设为0时

        .box2{
            position: absolute;
            left: 0px;
        }

物体会出现在最角落

但是当没有设定任何位移元素时

        .box2{
            position: absolute;
        }

box2则会因为排列顺序而出现在box1的右方

fixed

fixed是固定的意思，代表不管网页如何滚动，他都会待在设定好的位子

        .box2{
            position: fixed;
            left: 50px;
            top:50px;
        }

这是在网页最上缘的样子

即使往下滚动也依然待在同样的位子