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
使用場景:遮罩布局
遮罩布局
即全屏遮上一層灰色的顏色

遮罩布局

遮罩布局設置

遮罩布局樣例