标准流

块级元素独占一行---垂直布局 行内块元素水平布局---水平布局

浮动

让原本垂直布局的块元素变成水平布局

定位

可以让元素自由地摆放在页面的任意位置 用于盒子之间的层叠情况

使用场景

定位之后元素的层级越高，可以层叠在其他盒子上面 可以让盒子固定在屏幕中的某个位置

使用定位步骤

1. 设置定位属性

• • absolute 绝对定位

2. 设置偏移值

• • 偏移值分为两个方向，水平和垂直方向各选一个

绝对定位

• 页面中不占位置，脱离了标准流
• 配合方位属性实现移动
• 祖先元素中没有定位，就按浏览器body移动
• 祖先元素中有定位，相对于最近的，有定位的祖先元素进行移动

相对定位

relative

1. 配合方位属性移动
2. 没有脱离标准流
3. 相对于自己原来的位置移动
4. 应用场景：

• 子绝父相
• 用于小范围的移动

子绝父相

1. 让子元素相对于父元素移动
2. 含义：

• 子元素，绝对定位。
• 父元素，相对定位。

3. 好处：父元素相对定位，对页面布局影响最小

固定定位

以浏览器为定位，固定在一处不动 通过方位属性移动

元素的层级关系

1. 定位>浮动>标准流
2. 相对，固定，绝对默认层级相同
3. html中写在下面的元素层级更高，会覆盖上面的元素
4. 更改层级：z-index，数字越大，层级越高