布局与定位的区别：布局是屏幕平面上的，定位是垂直于屏幕的。
- 一个div的分层
根据图片可以看出，浮动元素脱离文档流，其实就是浮起来了一点点。其中文字内容根据出现的顺序来覆盖。
- position属性
- static默认值，待在文档流里。
- relative相对定位，升起来，但不脱离文档流。
- absolut绝对定位，定位基准是祖先里的非static元素。
- fixed固定定位，定位基准是viewport。
- sticky粘滞定位。
- 一些经验：
- 如果写了absolute，一般都得补一个relative。
- 如果写了absolute或fixed，一定要补top和left。
- sticky兼容性很差。 1. position: relative
使用场景：
- 用于做位移。
- 用于给absolute元素做定位基准元素。
- 配合z-index使用：z-index默认值为auto，值越大，层越高。 2. position: absolute
使用场景：
- 脱离原来的位置，另起一层，比如对话框的关闭按钮
- 鼠标提示（如图：实现当鼠标悬浮按钮上出现提示信息）
- 配合z-index使用。
3. position: fixed
使用场景：
- 烦人的广告
- 回到顶部按钮
- 配合z-index使用。 ———————————————————————————————————————
当元素添加了非static的定位属性，那么它的层就高于其他元素。示意图如下：
- 层叠上下文 比喻：每个层叠上下文就是一个新的小世界（作用域），这个小世界里面的z-index跟外界无关，处在同一个小世界的z-index才能比较。负z-index逃不出小世界。
哪些不正交的属性可以创建层叠上下文？ 答案： developer.mozilla.org/zh-CN/docs/…
需要记忆的有z-index、flex、opacity、transform。
