定位

可以将元素摆放在网页的任意位置

一般用于盒子之间的层叠情况

定位的使用场景：

1. 可以解决盒子和盒子之间的层叠问题
2. 可以让盒子始终固定在屏幕的某个位置

实现定位的步骤

1.设置定位方式

属性名：position

常见属性值：静态定位：static；相对定位：relative；绝对定位:absolute；固定定位：fixed

2.设置偏移值

静态定位

静态定位是默认值，就是之前认识的标准流

注意点:

1. 静态定位就是之前的标准流，不能通过方位属性进行移动
2. 之后说的定位不包括静态定位，一般特指后几种:相对，绝对，固定

相对定位

介绍:自恋型定位，相对于自己之前的位置进行移动

特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置：没有脱标

应用场景：

1. 用于配合绝对定位组CP(子绝父相)
2. 用于小范围的移动

绝对定位

介绍:拼爹型定位，相对于非静态定位的父元素进行定位移动

特点：

1. 需要配合方位属性进行移动
2. 默认相对于浏览器的可视区域进行移动
3. 在页面中不占位置->已经脱标

应用场景：

1. 配合相对定位组cp

绝对定位相对谁移动？

1. 祖先元素中没定位 默认相对于浏览器进行移动
2. 祖先元素中有定位 相对于最近的有定位的祖先元素进行移动

一般应用 ：子绝父相

特殊情况：子绝父绝，如果发现父元素已经有绝对定位了

子绝父相水平居中的方法

1. 子绝父相
2. left:50%
3. transform:translateX(-50%)

子绝父相水平垂直都居中的方式

1. transform：translate（-50%.-50%）

固定定位

介绍:死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed

特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视位置进行移动
3. 在页面中不占位置->已经脱标

元素的层级关系

不同布局方式元素的层级关系

标准流<浮动<定位

不同定位之间的层级关系

• 相对，绝对，固定默认层级相同
• 此时HTML中写在下面的元素层级比较高，会覆盖上面的元素

更改定位元素的层级的话，用z-index属性，数字越大，层级越高