CSS层叠上下文与BFC
CSS中的层叠上下文和BFC是两个很虚但极其重要的概念，影响到网页布局的方方面面。有几篇博文讲得很详细，这里稍加摘录，便于记忆。 CSS层叠上下文 张鑫旭在 深入理解CSS中的层叠上下文和层叠顺序 里有深入的讲解： 可以创建层叠上下文的规则： z-index 值不为 auto 的flex项(父元素 display:flex|inline-flex ) 元素的 opacity 值不是 1 元素的 transform 值不是 none 元素 mix-blend-mode 值不是 normal 元素的 filter 值不是 none 元素的 isolation 值是 isolate will-change 指定的属性值为上面任意一个 元素的 -webkit-overflow-scrolling 设为 touch 需要注意的是： 如果层叠上下文元素不依赖z-index数值，则其层叠顺序是 z-index:auto ，可看成 z:index:0 级别； 如果层叠上下文元素依赖z-index数值，则其层叠顺序由 z-index 值决定。 BFC（Block Formatting Context） 梦想天空 在 BFC 神奇背后的原理 里解析得很到位： BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level