定位 position

　　fix：完全脫離文檔流，參照物是可視窗口，可以設置top left right bottom

　　relative： 不脫離文檔流，參照物是自己原來的位置，可以設置top left right bottom

　　absolute： 完全脫離文檔流，參照物是已定位的父級標簽，可以設置top left right bottom

舉例：

fix：上一篇的返回頂部

relative：

定義三個div，如下圖

設置C2為relative

position: relative; top:200px; left: 200px;

效果如下：

未脫離文檔流，相對於自己原來的位置偏離200px，

absolute

body

<div class="c1">C1</div>
<div class="box"><div class="c2">C2</div></div>
<div class="c3">C3</div>

style

 body{
            margin: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            background-color: #53868B;
 


        }
        .c2{
            width: 200px;
            height:200px;
            background-color: cornflowerblue;
            position: absolute;
            top:200px;
            left: 200px;

        }
        .c3{
            width: 200px;
            height: 200px;
            background-color: darkmagenta;

        }

        .box{
            position: relative;
        }
 

給C2設置一個父級div叫box，設置為relative，不脫離文檔流，C2本身設置為absolute，脫離文檔流，相對於父級的位置移動200px，而C3則會上移，

效果如下：

如果不加box這個div，則會相對於body為參照物，效果如下：

定位 position