要了解CSS定位，那么我们必须要了解一个重要的概念DIV分层。
DIV分层
position的五个取值
static
static默认值，待在文档流内，所有元素默认默认position是static
relative相对定位
relative相对定位，相对于自身，在文档流中升起来，但不脱离文档流，即是浮动元素，并且他在文档流中占得位置不变，在位移中也只是可视化显示改变了- 用于位移
- 经常和绝对定位
absolute相互配合使用
z-index
- z-index: auto默认值，不创建新层叠上下文
- z-index: 0/1/2
- z-index: -1 /-2
注意
- 绝对不要写z-index: 9999
- 学会管理z-index
absolute绝对定位
absolute绝对定位,脱离文档流另起一层，并且需要判断自身基准于那个元素，这个元素就是他的爸爸- 若在使用中想相对于爷爷，就在爷爷元素中加
relative，爸爸元素就不要加relative，因为在使用中他会在最近的祖先元素找定位元素定位来判断自身。 - 重点！！！:是相对于他的祖先元素中，最近的一个定位元素定位。定位元素就是：
position不是static，就是定位元素 - 有时候用来做对话框关闭按钮或者用来做鼠标提示。
注意
- 某些浏览器上如果不写
top /left会位置错乱bug,我们可以写top:0|left:0，防止出现bug left: 100%left: 50%加负margin来调整位置。
fixed固定定位
- 相对于视口(viewport)定位
- 用来做页面广告
注意
- 手机端尽量尽量不要用
position：fixed，回有众多bug position：fixed的效果会被transfrom：scale( )消除，fixed与transfrom不要放在一个元素里面。
sticky粘滞定位
- 特别适合网页导航使用
注意
- 兼容性很差，众多浏览器不支持。
层叠上下文
特点
- 每个层叠上下文就是一个新的小世界（作用域）
- 这个小世界里面的z-index跟外界无关
- 处在同一个小世界的z-index才能比较
- 父元素与子元素的z-index是不能比较的
可创建层叠上下文的元素
- 文档中的层叠上下文由满足以下任意一个条件的元素形成：
文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素（参见 the specification for opacity）；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
transform
filter
perspective
clip-path
mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
-webkit-overflow-scrolling 属性值为 touch 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。
- 重点记忆：
z-index / flex / opacity / tran sform
负z-index
- 负
z-index与正z-index不同 z-index: auto默认值，不创建新层叠上下文- 看图分辨
z-index顺序
资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程
