CSS定位的分类，叠放次序(z-index)，实现水平垂直居中

CSS 元素的定位主要由两部分组成：边偏移 和 定位，这两个必须搭配使用

边偏移：left，top，bottom，right
定位分为：static，absolute，relative，fixed

静态定位(static)：静态定位就是元素默认的定位；边偏移对他来说不起作用，一般用来清除定位的。
绝对定位(absolute)：绝对定位是完全脱离文档流的不占位置
相对定位(relative)：相对定位是相对于自己原来的位置(左上角)进行移动定位的，不脱离文档流
固定定位(fixed)：固定定位不占文档流，固定定位一定要写宽高，除非有内容撑开不用写

【重要】：
01 如果某一个盒子是绝对定位而父亲却没有定位那这个盒子就会跑出去以浏览器窗口document为基准进行定位，这个时候需要给父亲一个定位无论什么定位都可以，一般使用“子绝父相”的定位来，子的定位不管父亲有没有margin或padding，都是往父级的边框上进行定位的。
02 在绝对定位的时候如果 left 或 right 为 0 的时候就是往哪边对其 如图：

03 选择元素的 absolute 或 fixed 也会将元素转换为 inline-block

z-index：默认为0，适用于几个平级的绝对定位元素，设置z-index权重

实现水平垂直居中： margin 为负数的时候为减去自身的一般长度来弥补多出来的偏移
或者将margin-left:-50px；变成 transform:translate(-50%，-50%)