定位

定位----————————---————

网页常见布局方式，标准流，浮动，定位。

定位可以解决盒子与盒子之间的层叠问题。定位层级最高，可以叠在其他普通盒子上面。可以让盒子始终定位在网页的某一个地方。

【1，设置定位方式】属性名：position。属性值：静态static，相对relative，绝对absolute，固定fixed。

【2.设置偏移值】设置偏移值：left\right\top\bottom+数字px

**静态定位 **static

静态定位是默认值，所以代码是省略掉的。就是之前认识的标准流，所以不能通过方位属性移动。

相对定位 relative

需要配合方位属性实现移动，相对于自己原来的位置移动，在页面中占位置，没有脱标。常见应用场景：

绝对定位 absolute

拼爹型定位，需要配合方位属性进行移动，相对于离他最近祖先元素中有定位的元素进行定位，否则默认以浏览器的可视区域进行移动，整体为父元素。会脱标。

边框border不会影响定位。

子绝父绝也可以使用，不要特地修改父元素的定位属性。

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

使用子绝父相对网页布局的影响最小。

子绝父相水平居中方法：普通做法【left：50%；回车margin-left：自己的一半。】优化做法【transform：translateX（-50%）】

水平垂直都居中方法【transform：translate（-50%，50%）】

ps：要提前输入top，left的值。translate负责补正。

固定定位 fixed

代码：position：fixed

死心眼型定位，相对于浏览器的可视区域进行定位和移动。需要配合方位属性进行移动始终会在浏览器中移动。固定定位会脱标

元素层级关系：标准流元素<浮动<定位

定位层级关系：相对，绝对，固定，默认层级相同。

默认情况下body中写在下面的元素层级会更高。

z-index属性可以控制元素的层级关系，属性值为数字，越大的层级越高。