css中重要的概念
层叠上下文
文档中的层叠上下文由满足以下任意一个条件的元素形成：
小总结
z-index相关：
- z-index不为auto
- position 为absolute relative fixed sticky（后两种z-index无限制）
- flex grid容器的子元素
- 新属性css3相关
- transform 变换
- filter 过滤器
- 和性能方面有关系
- will-change
- contain
详细介绍
- 文档根元素（
<html>）； position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；- flex (
flex) 容器的子元素，且z-index值不为auto； - grid (
grid) 容器的子元素，且z-index值不为auto； opacity属性值小于1的元素（参见 the specification for opacity）；mix-blend-mode属性值不为normal的元素；- 以下任意属性值不为
none的元素： isolation属性值为isolate的元素；will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的z-index值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
- 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
- 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
- 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
Tips: 层叠上下文顺序
BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 根元素（
<html>） - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、``table-row、table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或inline-table） overflow计算值(Computed)不为visible的块元素display值为flow-root的元素contain值为layout、content或 paint 的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width(en-US) 不为auto，包括 ``column-count为1） column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
几个重要的应用:
BFC 可以包含浮动的元素（清除浮动，防止高度塌陷）
同一个 BFC 下外边距会发生折叠
BFC 可以阻止元素被浮动元素覆盖(左侧固定，右侧自适应布局)
可以参考知乎