CSS定位
一个div的分层
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
有时候我们需要给他改命，这时候就用到了position
position
定位的基本思想很简单，让他出现在你想让他出现的位置
或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
来介绍 position 属性的五个值:
static默认值，待在文档流里
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
不用管。
relative 相对定位，升起来，但不脱离文档流
常用
使用场景
-
用于做位移（很少用）
-
用于做
absolute元素做爸爸 -
配合
z-index-
z-index:auto 默认值，不创建新层叠上下文 -
z-index::0/1/2/-1/-2
-
-
经验
-
写z-index:9999的都是彩笔 -
学会管理z-index
-
absolute绝对定位，定位基准是祖先里的非static
绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于<html>
使用场景
- 脱离原来的位置，另起一层，比如对话框的关闭按钮
- 鼠标提示
配合z-index
经验:
- 很多彩笔都以为
absolute是相对于relative定位的 - 相对于祖先元素中最近的一个祖先元素(非
static的) - 某些浏览器上如果不写
top/left会位置错乱 - 善用
left:100%; - 善用
left:50%;加负margin
fixed固定定位，定位基准是viewport(有诈)
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。
相对于视口定位，视口就是一个网页或者一个iframe能让人看到的
使用场景
- 烦人的广告
- 回到顶部按钮 经验
- 配合
z-index - 手机上尽量不要用这个属性，坑很多
- 别和
transform的东西配合使用
sticky粘滞定位，不好描述直接举例
适合当导航栏的定位
当页面在目标区域时，它就没什么异样
而当页面滚动超出目标区域时，它就像position:fixed;（固定定位），固定在那了。
经验
-
如果你写了
absolute，一般都得补一个relative,相对定位元素经常被用来作为绝对定位元素的容器块。 -
absolute定位、Fixed定位 使元素的位置与文档流无关，因此不占据空间。 -
absolute定位、Fixed定位 的元素和其他元素重叠。 -
如果你写了
absolute或Fixed，一定要补top和left -
sticky兼容性很差，主要用于面试装逼
