position

static  預設值

位置設定為static的元素會正常顯示，它始終會處於文件流給予的位置（static元素會忽略任何top、buttom、left、right宣告）

absolute

相對於父級元素的絕對定位，浮出。脫離佈局流，它不佔據空間，就是我們說的層，其位置相對於最近的已定位父元素而言的位置

可直接指定left、top、right、buttom屬性。若父元素沒有定位，則以html（根元素）。(層疊順序z-index:value)

relative

是相對於預設位置的偏移定位，通過設定left、right、top、buttom值可將其移至相對於其正常位置的地方（相對於自己開始的位置發生的位置上的移動，（不會破壞正常的佈局流）

fixed

相對瀏覽器的絕對定位，是相對於瀏覽器視窗的指定座標進行定位，此元素的位置可通過left、right、top、buttom屬性來規定，不論視窗滾動與否。元素都會留在那個位置。

absolute和relative的區別

       參照物不同

       會不會破快佈局流，佔不佔空間

        absolute破壞佈局流

包含塊（絕對定位參照物）：

        給要做決定定位的元素的父元素設定相對定位position：relative；，這樣父元素就形成了一個包含塊。

包含塊是絕對定位的基礎，包含塊就是為定位元素提供座標，偏移和顯示範圍的參照物，即確定絕對定位的便宜起點和百分比商都的參考；

預設情況下，html就是一個大的包含塊，所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的

如果我們定義了包含元素為包含快以後，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置

z-index

auto | number

檢索或設定物件的堆疊順序。

auto   預設值

number  無單位的整數，可謂負數

沒有設定z-index時，最後寫的物件優先顯示在上層，設定後，數值越大，層越靠上；

功能：控制定位元素的層疊順序。一般此屬性出現在有定位的情況下。

號外：

元素的margin屬性在元素的外面，不佔用width

元素的padding屬性在元素的裡面，佔用width