CSS 的定位是垂直于屏幕的
position 属性
- static 默认值，待着文档流里
- relative 相对定位，升起来，但不脱离文档流
1.用做位移（很少用）
2.给 absolute 元素做爸爸
- absolute 绝对定位，定位基准是祖先元素中最近的一个非 static 元素
1.脱离原来的位置，另起一层，比如对话框的关闭按钮
2.鼠标提示
- fixed 固定定位，定位基准是viewport （视口）手机上尽量不使用，坑很多
1.广告
2.回到顶部按钮
- stickly 粘滞定位，兼容性较差，一般不用
z-index 属性
控制元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 仅能在定位元素上奏效
/* 字符值 */
z-index: auto; /* 默认值 不会创建新层叠上下文 */
/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 不能脱离层叠上下文 */
/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;
经验
如果写了 absolute 一般要补个 relative
如果写了 absoulute 或 fixed 一般要补个 top 和 left ，某些浏览器不写这两个会位置错乱
善用 left:100% ;善用 left:50% 加负 margin 或加 transform:translatex (-50%)
每个层叠上下文就是个小世界（作用域）
这个小世界里的 z-index 与外界无关，同一个世界的才能比较
z-index / flex / opacity / transform 等属性都可以创建层叠上下文
