position此屬性的值有static,relative,absolute,fixed,sticky;css
下面依次講解每一個值佈局
static:此元素的定位根據正常的文檔流來進行定位,且設置top,right,bottom.left和z-index屬性不起做用;spa
relative:此元素的定位根據正常的文檔流來進行定位,可是此元素的位置能夠設置top,right,bottom.left等值來進行定位;code
absolute:此元素會是元素脫離文檔流;而且不會爲頁面佈局中的元素建立空間。它相對於其最近的祖先(若是有的話)定位; 不然,它相對於整個窗口來放置。其最終位置是由的值肯定的top
,right
,bottom
,和left,
此時將建立新的堆疊上下文。當z-index值不是auto時,絕對定位框的邊距不會與其餘邊距一塊兒摺疊。
文檔
fixed:此元素會是元素脫離文檔流;而且不會爲頁面佈局中的元素建立空間,它相對於整個窗口來放置。其最終位置是由的值肯定的top
,right
,bottom
,和left,而且始終在視窗的同一位置;
get
sticky:此元素的定位根據正常的文檔流來進行定位,其餘與fixed類似頁面佈局