什么是定位
布局决定平行于屏幕的位置，定位决定垂直于屏幕的位置
一个div的分层，从上到下依次为：
- 内联子元素
- 浮动元素
- 块级子元素
- border
- background
z-index：
特点：
- z-index默认值为auto
- 整数，可为正值，0， 负值
- 没有单位，默认为0
- 一般值大的位于上层，小的位于下层
- 只对定位元素有效（非static），对浮动元素无效
定位属性
position确定元素位置：
static：默认值。元素在文档流中，静态定位元素不受top,right,bottom,left和z-index影响。relative: 相对定位，元素在文档流中，相对于元素本身移动，元素所占空间不会改变。经常被用作定位绝对元素的容器块。absolute:绝对定位，元素脱离文档流，不占据空间，会与其他元素重叠。相对于父元素中最近的已定位（非static）元素进行定位，如果没有已定位的父元素，那么相对于<html>。fixed:固定定位，元素脱离文档流，不占据空间，会与其他元素重叠。位置相对于浏览器viewport固定，即使滚动窗口它也不会移动。sticky: 可被看作为relative和fixed的结合，当元素在视口内，表现为relative；滚动出视口时，元素表现为fixed，粘贴在某个固定位置，此位置相对于它的滚动容器（overflow为hidden,scroll,auto或overlay的父元素）。
应用：
relative:
- 微调元素位置
- 作为 absulute 元素的容器
absolute:
- 脱离原来的位置，另起一层
- 不仅相对于relative定位，相对于最近的非static元素
- 善用left: 50% 和 负 margin 进行居中
fixed:
- 使用场景：烦人的广告，回到顶部按钮
层叠上下文
- 每一个层叠上下文就是一个小作用域
- 一个作用域里的z-index与外面无关
- 同一个作用域的z-index才能比较
- 负z-index无法脱离作用域
- z-index默认值auto不会创建新的层叠上下文，0可以
- 能创建层叠上下文的属性有：z-index / flex / opacity / transform
