CSS定位与层叠上下文
1.一个div的分层
(图片来自饥人谷)
内联子元素的层级最高，会覆盖其余的元素，后出现的无论块级还是内联子元素都按照先后顺序覆盖，后来的元素覆盖前面的元素
2.新属性 position 定位
属性值如下：
static 默认值。待在文档流里面
-
relative 相对定位，升起来，但不脱离文档流
用于做位移(很少用了)
用于给absolute元素做爸爸(比较常用)父相子绝
-
配合z-index
z-index: auto 默认值，不创建新层叠上下文
z-index: 0 / 1 / 2
z-index:-1 / -2
尽量别写z-index: 9999这样的写法
学会管理 z-index
-
absolute绝对定位，定位基准是祖先里的非static，如果没有这样的祖先元素，那么基点就会变成整个网页的根元素 html
脱离原来的位置,另起一层,比如对话框的关闭按钮
配合z-index
-
经验：
很多人以为absolute是根据relative定位的，其实不是
某些浏览器上如果不写top / left 会位置错乱
要善用 left：100%
要善用 left 50%；加负的margin
-
fixed 固定定位，定位基点是viewport（有坑）
烦人的广告
回到顶部的按钮
配合z-index
-
经验
手机上尽量不要用这个属性，很多坑
不信手机搜索[移动端fiexd]
transform : scale() 会使这个属性失效
sticky 粘滞定位，不好描述直接举例子
过来人经验：
如果你写了absolute,一般都得补一个relative
如果你写了absolute 或 fixed,一定要补top和 left
sticky兼容性很差，主要用于面试时的拓展
3.定位与层叠上下文
定位后的元素会自动跑到最高的层级，覆盖元素中其他的元素，默认的z-index值为0，如果是负值 ，则会跑到背景色下面去
每个层叠上下文就是一个新的小世界(作用域类似)
这个小世界里面的z-index跟外界无关 ，设置了非static定位的元素并且设置了z-index值的元素会形成自己的层叠上下文，后面还有其余的属性可以设置
处在同一个小世界的 z-index 才能比较 如果不写默认属于根元素 html 中的层叠上下文
在层叠上下文中 z-index 即使是负值也不会在背景颜色下面
那些属性可以创建层叠上下文呢？
MDN文档可以查阅 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
需要记住的 z-index flex opacity非1 transform 等等
