#书摘 #css #前端
《CSS 世界》理解CSS世界的层叠上下文和层叠水平
1. 层叠上下文，英文称作 stacking context，是 HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
2. 层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。
3. 千万不要把层叠水平和CSS的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素；而层叠水平所有的元素都存在。
4. 层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。（p2）
5. 下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则：
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
6. 层叠上下文元素有如下特性。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以阻断元素的混合模式（参见http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明）。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
7. 和块状格式化上下文一样，层叠上下文也基本上是由一些特定的CSS属性创建的。我将其总结为3个流派。
（1）天生派：页面根元素天生具有层叠上下文，称为根层叠上下文
（2）正统派：z-index值为数值的定位元素的传统“层叠上下文”。当其z-index值不是auto的时候，会创建层叠上下文
（3）扩招派：其他CSS3属性（flex等）
《CSS 世界》理解CSS世界的层叠上下文和层叠水平
1. 层叠上下文，英文称作 stacking context，是 HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
2. 层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。
3. 千万不要把层叠水平和CSS的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素；而层叠水平所有的元素都存在。
4. 层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。（p2）
5. 下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则：
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
6. 层叠上下文元素有如下特性。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以阻断元素的混合模式（参见http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明）。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
7. 和块状格式化上下文一样，层叠上下文也基本上是由一些特定的CSS属性创建的。我将其总结为3个流派。
（1）天生派：页面根元素天生具有层叠上下文，称为根层叠上下文
（2）正统派：z-index值为数值的定位元素的传统“层叠上下文”。当其z-index值不是auto的时候，会创建层叠上下文
（3）扩招派：其他CSS3属性（flex等）
