CSS定位

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

position 上右下左

z-index 类似于图层，z轴上的排序

z-index 父级元素起作用

position的属性

static、relative、absolute、fixed

relative相对定位

仍在文档流中
参照物为元素本身
使用场景：绝对定位元素的参照物

相对定位

相对定位可以为绝对定位的子元素提供参考依据

absolute绝对定位

默认宽度为内容宽度
脱离文档流
参照物为第一个定位祖先/根元素

绝对定位

使用场景：轮播头图

轮播头图1 轮播头图2

使用场景：三行自适应布局

三行自适应布局
三行自适应布局样例

fixed固定定位

默认宽度为内容宽度
脱离文档流
参照物为当前视窗

使用场景：固定顶栏

固定顶栏1 固定顶栏2

使用场景：遮罩布局

遮罩布局
即全屏遮上一层灰色的颜色

遮罩布局 遮罩布局设置 遮罩布局样例