position 設置定位方式
top,right,bottom,left,z-index 設置位置

position

上右下左

z-index 類似于圖層，z軸上的排序

z-index

父級元素起作用

position的屬性

static、relative、absolute、fixed

relative相對定位

仍在文檔流中
參照物為元素本身
使用場景：絕對定位元素的參照物

相對定位

相對定位可以為絕對定位的子元素提供參考依據(jù)

absolute絕對定位

默認寬度為內(nèi)容寬度
脫離文檔流
參照物為第一個定位祖先/根元素

絕對定位

使用場景：輪播頭圖

輪播頭圖1

輪播頭圖2

使用場景：三行自適應布局

三行自適應布局

三行自適應布局樣例

fixed固定定位

默認寬度為內(nèi)容寬度
脫離文檔流
參照物為當前視窗

使用場景：固定頂欄

固定頂欄1

固定頂欄2

使用場景：遮罩布局

遮罩布局
即全屏遮上一層灰色的顏色

遮罩布局

遮罩布局設置

遮罩布局樣例