一、div的分层

二、position

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用，现在比较少使用

选择器 { 
    position: static; 
}
复制代码

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

选择器 { 
	position: relative; 
}
复制代码

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的**（脱标）**

 选择器 { 
 	position: absolute; 
 }
复制代码

tips:left 50% transformX(-50%)：实现水平居中对齐
复制代码

如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

固定定位是元素固定于浏览器可视区的位置。

 选择器 { 
 	position: fixed; 
}
复制代码

粘性定位可以被认为是相对定位和固定定位的混合。

 选择器 { 
     position: sticky; 
     top: 10px; 
 }
复制代码

定义：用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

文档根元素（<html>）；
position值为 absolute（绝对定位）或 relative（相对定位）且 z-index值不为 auto 的元素；
position值为 fixed（固定定位）或 sticky（粘滞定位）的元素
flex 容器的子元素，且 z-index 值不为 auto；
grid容器的子元素，且 z-index值不为 auto；
opacity属性值小于 1 的元素
以下任意属性值不为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）的元素。