定位
使用定位的步骤
-
设置定位方式
- 属性名：position
- 常见属性值：
- 静态定位-static
- 相对定位-relative
- 绝对定位-abdolute
- 固定定位-flxed
设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选区的原则一般是就近原则(离那边近用哪个)
相对定位
- 介绍：自恋型定位，相对于自己之前的位置进行移动
- 代码：position：relative；
- 特点：
- 需要配合方位属性实现移动
- 相对于自己原来的位置进行移动
- 在页面中占位置-没有托标
- 应用场景：
- 配合绝对定位cp(子绝父相)
- 用于小范围的移动
绝对定位
- 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
- 代码：position：absolute；
- 特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置-已经托标
- 应用场景：
- 配合绝对定位组cp(子绝父相)
固定定位
- 介绍：死心眼型定位，相对于浏览器进行定位移动
- 代码：position：fixed；
- 特点：
-
- 需要配合方位属性实现移动
-
- 相对于浏览器可视区域进行移动
-
- 在页面中不占位置-已经脱标
- 应用场景：
-
- 让盒子固定在屏幕中的某个位置
元素层级问题
- 不同布局方式元素的层级关系：
-
- 标准流< 浮动 < 定位
- 不同定位之间的层级关系
-
- 相对，绝对，固定默认层级相同
-
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
