CSS层叠概念
层叠上下文
可以想象一张桌子，上面有一堆物品，这张桌子就代表着一个层叠上下文。 如果在第一张桌子旁还有第二张桌子，那第二张桌子就代表着另一个层叠上下文;
现在想象在第一张桌子上有四个小方块，他们都直接放在桌子上。 在这四个小方块之上有一片玻璃，而在玻璃片上有一盘水果。 这些方块、玻璃片、水果盘，
各自都代表着层叠上下文中一个不同的层叠层，而这个层叠上下文就是桌子
形成层叠上下文的条件：
根元素 <html></html>
position值为 absolute|relative，且 z-index值不为 auto
position 值为 fixed|sticky
z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex
opacity 属性值小于 1 的元素
transform 属性值不为 none的元素
mix-blend-mode 属性值不为 normal 的元素
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path 值不为 none 的元素
perspective 值不为 none 的元素
isolation 属性被设置为 isolate 的元素
will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
-webkit-overflow-scrolling 属性被设置 touch的元素
层叠等级
决定了同一个层叠上下文中元素在z轴上的显示顺序
层叠等级不一定由Z-index决定,只有定位元素的层叠等级才由 z-index 决定
Z-index
元素的 z-index 值只在同一个层叠上下文中有意义
层叠顺序
背景和边框：形成层叠上下文的元素的背景和边框。
负z-index值：层叠上下文内有着负z-index值的定位子元素，负的越大层叠等级越低；
块级盒：文档流中块级、非定位子元素；
浮动盒：非定位浮动元素；
行内盒：文档流中行内、非定位子元素；
z-index: 0：z-index为0或auto的定位元素， 这些元素形成了新的层叠上下文；
正z-index值：z-index 为正的定位元素，正的越大层叠等级越高
产生BFC的条件
1. 根元素或包含根元素的元素
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 strict 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
BFC的约束条件
1：内部的Box会在垂直方向上一个接一个的放置
2：垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关):
3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此，BFC的区域不会与float的元素区域重叠
4：计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
BFC解决的问题
1：自适应两栏布局 （同下）
2：阻止普通文档流被浮动元素覆盖(文字环绕效果)(原因是约束条件3，解决办法，BFC的区域不会与float的元素区域重叠)
3：清除浮动(让元素变成BFC,从而计算高度时候，浮动元素也会计算进去)
4：解决普通文档流元素的外边距折叠问题(让两个元素不在同一个BFC，就不会产生折叠了)