1.相對定位 相對於元素自身的偏移

position: relative;
        top: 20px;
        left: -50px;

relative聲明瞭之後，在下方宣告四個方向的位置偏移量

這裡注意方向 相對於原來的top有了20px的距離，相對於原來的left有了-50px的距離，因此元素是向下和向左移動

雖然元素會出現偏移出父級元素的情況，但這並不是浮動，父級元素仍然保留有其原來的位置

2.絕對定位

position: absolute;

與父級元素完全無關，相對於瀏覽器進行定位

當父級元素擁有相對定位時，絕對定位會相對於父級元素進行定位

3.固定定位

position: fixed;

相對於瀏覽器位置不會改變，頁面改動，元素位置也不會改變

4.z-index

首先要有圖層的概念

這裡舉例：頁面實現如下效果

最底下是img 然後一個背景為黑色的空div，然後是一個text，此時的顯示介面如圖，但當在空的黑色div使用了

.block{
    background: black;
    position: relative;
   top: -100px;
z-index: 3;
}

後頁面：

此時空div的圖層優先順序比text高所以優先展示，z-index從0開始越大優先順序越高，反之亦是如此；

.block{
    background: black;
    position: relative;
   top: -100px;
z-index: 3;
}
.text{

    color: white;
    position: relative;
    top: -150px;
    z-index: 4;
 

}