布局与定位的区别：布局是屏幕平面上的，定位是垂直于屏幕
div分层
position取值
static默认值，当前元素在文档流内relative相对定位，升起来，但不脱离文档流absolute绝对定位，定位基于祖先里的非staticfixed固定定位，定位基于viewport（视口）sticky粘滞定位
注意
- 如果写了
absolute一般都需要补一个relative - 如果写了
absolute和fixed一定要补top和left sticky兼容性不好
position：relative
1.使用场景
- 用于做位移（不常用）
- 用于给absolute做父元素
2.配合z-index
- 把需要操作的元素都先写上
poistion: relative; - auto:默认，计算出来的值是0
- 0：
- 数字大的高于数字小的
- 整数（正负数，0均可）
- 永远别写z-index:9999
position：absolute
1.使用场景
- 脱离原来的位置，另起一层（比如对话框的关闭按钮）
- 鼠标提示
- 代码示例
2.也可以配合z-index使用
- 和relative的用法一样，而且不管position的值是relative还是absolute，z-index的作用都是一起的，不会relative的和relative的重叠，absolute的和absolute的重叠
3.使用方法
- 以谁为基准(祖宗中的定位元素（非static元素），可以是爸爸、爷爷）就在谁里面加入
position: relative;，在自己里面写position： absolute; - 用
top、bottom、left、right等来定位（一定要写至少两个。 否则有些浏览器显示的位置会错乱）
4.经验
- 查看hover
- 善用
left:100% - 善用
left:50%和负margin
position：fixed（手机尽量不要用这个属性）
1.使用场景
- 回到顶部按钮
- 烦人的广告
经验
- 手机永远别用这个fixed，一亿个bug然后会引出十亿个bug。
- 在父元素里加了某些属性，这个fixed就会失效。
层叠上下文
比喻
- 每一个层叠上下文都是一个新的小世界（作用域）
- 这个小世界的z-index跟外界无关
- 这处在同一个小世界的z-index才可以比较
哪些属性可以创建层叠上下文
重点记住 z-index / flex /opacity / transform
