position這個屬性能讓物件進行定位，來用這兩個div展現

    <div style="background-color: aqua;position:relative;top:50px;left:50px;">
            div1
    </div>
    <div style="background-color: aquamarine;">
        div2
    </div>

透過top,buttom,left,right來移動，方式跟用外邊框一樣，top:50px就是離上面50有px的距離
position:relative相對定位，讓物件在原本的位置進行移動，跟前面提過的float一樣，物件會往上飛，導致後面的物件被蓋住

    <div style="background-color: aqua;position:relative;top:50px;left:50px;">
            div1
    </div>
    <div style="background-color: aquamarine;position: relative;">
        div2
    </div>

兩邊都加上relative就不會被蓋過了

接下來是z-index，這個會影響物件重疊時哪個會顯示在上層
原本

加上z-index:1後

    <div style="background-color: aqua;position:relative;top:100px;z-index: 1;">
            div1
    </div>
    <div style="background-color: aquamarine;position: relative;">
        div2
    </div>

z-index就是一個比大小的過程，這邊給div2,z-index:2後又會回到原來的樣子

    <div style="background-color: aquamarine;position: relative;z-index: 2;">
        div2
    </div>

position:absolute絕對定位，依照父元素的非static屬性進行定位，如果父元素沒有就再往上層找，當都沒有時就會以body當作定位參考

    <div style="background-color: aqua;position:relative;width: 400px;height: 400px;">
            div1
    </div>
    <div style="background-color: aquamarine;position: absolute;right:0;bottom:0;">
        div2
    </div>

雖然div1是非static的元素，但是不是div2的父元素所以不會管他而是去找body當作定位標準，right:0和buttom:0表示離右邊及下面的距離是0，因此貼到畫面的右下角

    <div style="background-color: aqua;position:relative;width: 400px;height: 400px;">
            div1
        <div style="background-color: aquamarine;position: absolute;right:0;bottom:0;">
                div2
        </div>
    </div>

將div2作為div1的子元素後就，div2就會以div1為定位標準了

再來給div1裡添加文字，比較相對與絕對定位的差別

    <div style="background-color: aqua;position:relative;width: 400px;height: 400px;">
            div1
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ab consectetur facilis molestiae eaque ad quaerat corporis dolor. Praesentium iusto non ipsa eveniet in porro velit delectus amet placeat provident?</p>
    <div style="background-color: aquamarine;position:absolute;top:0">
                div2
     </div>
    </div>

用absolute的情況

換成relative後

relative進行位移後原本的空間還在，所以後面物件不會往前補
但是absolute則不一樣，

    <div style="background-color: aqua;position:absolute;">
            div1
    </div>
    <div style="background-color: aquamarine;width: 300px;">
                div2
     </div>

可以看到給div1 absolute後，下面的div2往前補被div1蓋住了

為了演示下面兩個，所以用了一堆文字擴充網易
positin:fixed固定定位

<div style="background-color: aqua;position:fixed;right: 0;">
            div1
    </div>

固定定位能讓物件一直在網頁上顯示

滑到底後div1仍然存在

固定的地方由設定的top,left等決定

     <div style="background-color: aqua;position:sticky;top:10%">
            div1
    </div>   

positin:sticky黏性定位
一開始沒有反應

等到畫面快脫離後就會開始跟著


sticky設置的像是觸發條件，top:10%當sticky離畫面有top有10%距離後就會一直黏在設定的地方，在觸發之前會在原先設定的地方待著