| CSS 文档流 | |
| 格式化上下文 |
Formatting Context 即初始元素定义的环境 |
| 块格式化上下文 |
Block Formatting Context BFC |
| 行内格式化上下文 |
Inline Formatting Context |
| 让元素脱离文档流的办法 |
float 其它元素对它围绕无视 postion:absolute 其它元素对它完全无视 |
| 创建块格式化上下文的方法 |
根元素或包含根元素的元素 浮动元素（元素的 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 值不为 visible 的块元素 display 值为 flow-root 的元素 contain 值为 layout、content或 strict 的元素 弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1） column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。 |
| 三维空间 | 如果所有元素都在文档流中，那么后面的元素会在上面 |
| position属性定位元素 | 除了默认的static值外的元素就是定位元素 |
| 每个元素都属于一个层叠上下文 | |
|
层叠上下文中具有相同堆栈级别的框根据文档树出现的顺序层叠在一起？？？ 不懂 |
|
| 层叠水平 |
Stacking Level 所有元素都有层叠水平 相当于职级 然后，对于普通元素的层叠水平，我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢？因为否则没有意义 这句什么意思 普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。 注意 层叠水平 不是 z-index |
| 层叠顺序 |
负z-index值：层叠上下文内有着负z-index值的子元素。 块级盒：文档流中非行内非定位子元素。 浮动盒：非定位浮动元素。 行内盒：文档流中行内级别非定位子元素。 z-index: 0：定位元素。 这些元素形成了新的层叠上下文。 正z-index值：定位元素。 层叠上下文中的最高等级。 |
|
|
|
| z-index属性只适用于定位元素。所以，即使为元素提供z-index的值将其置于其他元素之前，z-index也不会对元素产生影响，除非它被定位；也就是说，除非它具有除static之外的position值。 | |
|
如果你想要更改定位元素在z轴上的渲染顺序，可以使用z-index属性。例如，你有两个绝对定位的元素，它们在某个点上重叠，并且你希望其中一个元素显示在另一个元素的前面，即使它在源代码中出现在它之前，你也可以使用z-index属性来实现这一点 没看懂 |
|
|
获取除默认值auto之外的z-index值的元素实际上为其所有定位的后代元素创建层叠上下文。我们之前提到过，每个层叠上下文都有一个根元素，它包含其中的所有元素。当你将z-index属性应用于这个元素时，它将在其包含的下下文中指定元素的z轴顺序，并且还将创建以该元素为根的新层叠顺序上下文 好像理解了一半 |
|
